// 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/GUI_Compasses.html">GUI Compasses</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) {
    //ordinal marine
    let compass;
    let author_element;
    let exits;
    let status;
    if (properties.type === "marine") {
      exits = [
        ["ud", "updown"],
        ["fore", "marine"],
        ["aft", "marine"],
        ["port", "marine"],
        ["starboard", "marine"],
      ];
    } else {
      exits = [
        ["northwest", "ordinal"],
        ["north", "cardinal"],
        ["northeast", "ordinal"],
        ["west", "cardinal"],
        ["ud", "updown"],
        ["east", "cardinal"],
        ["southwest", "ordinal"],
        ["south", "cardinal"],
        ["southeast", "ordinal"],
      ];
    }

    if (properties.id) {
      author_element = document.querySelector("#" + properties.id);
    }
    compass = author_element ? author_element : document.createElement("div");
    if (properties.id) {
      compass.setAttribute("id", properties.id);
    }
    compass.classList.add("ajs-compass-wrapper", "ajs-dock-wrapper");
    if (properties.cssclasses) {
      for (var item in properties.cssclasses) {
        compass.classList.add(properties.cssclasses[item]);
      }
    }

    if (properties.createnodes) {
      let exitsEl = document.createElement("div");
      exitsEl.classList.add("ajs-compasspoints");
      compass.appendChild(exitsEl);

      let exitsHoverCatchEl = document.createElement("div");
      exitsHoverCatchEl.classList.add("ajs-compass-hover-trap");
      exitsHoverCatchEl.game = this.game;
      exitsEl.appendChild(exitsHoverCatchEl);
      exitsHoverCatchEl.addEventListener("mouseenter", () => {
        //console.log('hovered!');
        // hovercatch was imagined as a way to magnify
        // the status bar compass rose on rollover.
        // Could also be used for custom methods.
      });
      for (let exit in exits) {
        let exitEl;
        if (exits[exit][0] === "ud") {
          exitEl = document.createElement("div");

          // exitEl.classList.add("ajs-compasspoint", "ajs-compasspoint-button", exits[exit][0], exits[exit][1]);
          // exitEl.game = this.game;

          let u = document.createElement("div");
          u.classList.add("ajs-compasspoint", "up", "ajs-compasspoint-button");
          u.dataset.exit = "up";
          u.innerHTML = "up";
          u.game = this.game;
          u.setAttribute("aria-disabled", "true");
          exitEl.appendChild(u);

          let d = document.createElement("div");
          d.classList.add(
            "ajs-compasspoint",
            "down",
            "ajs-compasspoint-button"
          );
          d.dataset.exit = "down";
          d.innerHTML = "down";
          d.game = this.game;
          d.setAttribute("aria-disabled", "true");
          exitEl.appendChild(d);
        } else {
          exitEl = document.createElement("button");
          exitEl.setAttribute("aria-disabled", "true");
          exitEl.innerHTML = exits[exit][0];
        }
        exitEl.classList.add(
          "ajs-compasspoint",
          "ajs-compasspoint-button",
          exits[exit][0],
          exits[exit][1]
        );
        exitEl.dataset.exit = exits[exit][0];
        exitEl.game = this.game;

        exitsEl.appendChild(exitEl);
      }

      compass
        .querySelectorAll(".ajs-compasspoint-button")
        .forEach(function (el) {
          el.addEventListener("mouseenter", function (event) {
            this.classList.add("active");
          });
          el.addEventListener("mouseleave", function (event) {
            this.classList.remove("active");
          });
          el.addEventListener("click", function (event) {
            console.warn("clicked", this);
            this.game.sendToParser(el.dataset.exit);
          });
        });
    } // createnodes

    if (!properties.statusbar && !author_element) {
      this.displayEl.appendChild(compass);
    }
    this.compasses.push(compass);
    return compass;
  };
})();