// createCompass.js

(function () {
  /* global AdventureJS A */

  var p = AdventureJS.Display.prototype;

  /**
   * <strong>createCompass()</strong> is a method for creating
   * compasses, including the default compass in the status bar,
   * and any custom compasses. It takes a generic object
   * containing an id and an optional list of css classes to be
   * applied to a compass's HTML element.
   * Compasses will be created at runtime.
   * Compasses can be styled with any custom CSS.
   * Compasses will be updated to show available exits
   * any time the location changes.
   * To create a new compass:
   *
   * <pre class="display"><code class="language-javascript">MyGame.createCompass({
   *   "id":"MyCompass",
   *   "cssclasses":["custom"]
   * });
   * </code></pre>
   *
   * For more information, see
   * <a href="/doc/Widgets_CompassWidgets.html">Compass Widgets</a>.
   * @method AdventureJS.Display#createCompass
   * @param {Object} properties HTML ID and CSS classes.
   * @returns {Element} Returns the HTML element of the compass.
   */
  p.createCompass = function Display_createCompass(properties = {}) {
    const {
      type = "ordinal", //ordinal vs marine
      id = "",
      cssclasses = "",
      createnodes = true,
      container = null,
      format = "rock",
      statusbar = false,
      hide_labels = false,
      ...props
    } = properties;

    this.game.log("L1731", "log", 1, `[Display.js] createCompass`, "Display");
    let compass, directions, exits;
    var game = this.game;
    const initials = {
      northwest: "nw",
      north: "n",
      northeast: "ne",
      west: "w",
      up: "u",
      in: "i",
      down: "d",
      out: "o",
      east: "e",
      southwest: "sw",
      south: "s",
      southeast: "se",
    };
    if (type === "marine") {
      exits = [
        ["up", "updown"],
        ["in", "inout"],
        ["down", "updown"],
        ["out", "inout"],
        ["fore", "marine"],
        ["aft", "marine"],
        ["port", "marine"],
        ["starboard", "marine"],
      ];
    } else {
      exits = [
        ["northwest", "ordinal"],
        ["north", "cardinal"],
        ["northeast", "ordinal"],
        ["west", "cardinal"],
        ["up", "updown"],
        ["in", "inout"],
        ["down", "updown"],
        ["out", "inout"],
        ["east", "cardinal"],
        ["southwest", "ordinal"],
        ["south", "cardinal"],
        ["southeast", "ordinal"],
      ];
    }
    compass = container.querySelector(".ajs-compass");
    directions = container.querySelectorAll(".ajs-compass-direction");
    container.setAttribute("id", id);
    container.classList.add("ajs-compass-container", format);
    container.dataset.format = format;
    if (hide_labels) {
      container.classList.add("ajs-hide-labels");
    }
    if (!statusbar) {
      container.classList.add("ajs-region");
    }
    if (cssclasses) {
      for (var item in cssclasses) {
        container.classList.add(cssclasses[item]);
      }
    }

    // did author provide a custom compass?
    if (!compass || !directions?.length) {
      container.innerHTML = `<div class="ajs-inner">${this.svgCompass}</a>`;
      compass = container.querySelector(".ajs-compass");
    }

    const hover = compass.querySelector(".ajs-compass-hover-trap");
    hover.game = this.game;
    hover.addEventListener("mouseenter", () => {
      console.log("hovered!");
      // hovercatch was introduced as a way to magnify
      // the status bar compass rose on rollover.
      // Could also be used for custom methods.
    });

    compass.querySelectorAll(".ajs-compass-direction").forEach(function (el) {
      el.game = game;

      el.addEventListener("mouseenter", function (event) {
        if (!this.classList.contains("ajs-enabled")) return;
        this.classList.add("active");
      });
      el.addEventListener("mouseleave", function (event) {
        if (!this.classList.contains("ajs-enabled")) return;
        this.classList.remove("active");
      });
      el.addEventListener("click", function (event) {
        if (!this.classList.contains("ajs-enabled")) return;
        this.blur();
        this.classList.remove("active");
        this.game.sendToParser(this.dataset.exit);
        this.game.display.inputEl.focus();
      });
    });

    if (!statusbar) {
      this.game.settings.show_statusbar_compass = false;
    }
    this.compasses.push(compass);
    return compass;
  };
})();