// createDock.js

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

  var p = adventurejs.Display.prototype;

  /**
   * <strong>createDock()</strong> is a method for creating
   * custom docks. It takes a generic object containing an id,
   * and an optional list of css classes to be
   * applied to the element. Docks will be created at runtime,
   * and can be styled with any custom CSS.
   * To create a new dock:
   *
   * <pre class="display"><code class="language-javascript">MyGame.createDock({
   *   "id":"MyRoomDock",
   *   "cssclasses":["custom"],
   * });
   * </code></pre>
   *
   * For more information, see
   * <a href="/doc/GUI_Docks.html">GUI Docks</a>.
   * @method adventurejs.Display#createDock
   * @param {Object} properties HTML ID, CSS classes, and verbs.
   * @returns {Element} Returns the HTML element of the verb dock.
   */
  p.createDock = function Display_createDock(properties) {
    let author_element;
    let dock;
    let msg = "";

    if (properties.id) {
      author_element = document.querySelector("#" + properties.id);
    }
    if (!properties.class) {
      msg = `createDock received an object without class`;
      this.game.log("L1581", "warn", "high", msg, "GUI");
      return null;
    }

    this.game.log(
      "L1583",
      "log",
      "high",
      `createDock ${properties.class}`,
      "GUI"
    );

    dock = author_element ? author_element : document.createElement("div");
    dock.game = this.game;

    if (properties.id) {
      dock.setAttribute("id", properties.id);
    }

    dock.classList.add(
      `ajs-${properties.class.toLowerCase()}-dock-container`,
      "ajs-dock-wrapper"
    );

    if (properties.cssclasses) {
      for (var item in properties.cssclasses) {
        dock.classList.add(properties.cssclasses[item]);
      }
    }

    // class logic
    switch (properties.class.toLowerCase()) {
      //
      // exit
      //
      case "exit":
        this.exitdocks.push(dock);
        break;
      //
      // image
      //
      case "image":
        if (properties.type) {
          dock.dataset.type = properties.type;
        }
        if (properties.messages) {
          dock.messages = properties.messages;
        }
        dock.addEventListener("click", function (event) {
          if (this.messages) {
            this.game.print(A.getSAF.call(this.game, this.messages));
          }
        });
        this.imagedocks.push(dock);
        break;
      //
      // inventory
      //
      case "inventory":
        if (properties.assetclasses) {
          dock.dataset.assetclasses = properties.assetclasses.join(",");
        }
        if (properties.is) {
          dock.dataset.is = properties.is.join(",");
        }
        if (properties.is_in) {
          dock.dataset.is_in = properties.is_in.join(",");
        }
        this.inventorydocks.push(dock);
        break;
      //
      // content
      //
      case "content":
        this.contentdocks.push(dock);
        break;
      //
      // room
      //
      case "room":
        this.roomdocks.push(dock);
        break;
      //
      // verb
      //
      case "verb":
        var verbs = document.createElement("div");
        verbs.classList.add("verbdock", "verbs");
        dock.appendChild(verbs);

        if (properties.clear) {
          let clearbtn = document.createElement("button");
          clearbtn.classList.add("dock_button", "btn_verb", "btn_clearverbs");
          clearbtn.innerHTML = "&#x2716;";
          clearbtn.game = this.game;
          clearbtn.addEventListener("click", function () {
            this.game.clearInput();
          });
          verbs.appendChild(clearbtn);
        }

        properties.verbs.forEach(function (verb) {
          if ("string" === typeof verb) {
            verb = {
              verb: verb,
              parse: this.game.dictionary.verbs[verb]?.canBeIntransitive()
                ? false
                : true,
            };
          }
          let btn = document.createElement("button");
          btn.dataset.verb = verb.verb;
          btn.dataset.parse = verb.parse ? verb.parse : false;
          btn.classList.add(btn.dataset.verb, "dock_button", "btn_verb");
          if (verb.cssclasses) {
            for (var item in verb.cssclasses) {
              btn.classList.add(verb.cssclasses[item]);
            }
          }

          btn.innerHTML += `<span class="ajs-verb ajs-name">${verb.verb}</span>`;
          if (this.game.image_lookup[verb.verb]) {
            btn.classList.add("hasimage");
            btn.innerHTML += `<span class="ajs-verb ajs-icon"><img src="${this.game.image_lookup[verb.verb]}"/></span>`;
          }

          btn.game = this.game;
          btn.addEventListener("click", function () {
            console.warn("clicked", this);
            if (this.dataset.parse === "true") {
              this.game.sendToParser(this.dataset.verb);
            } else {
              this.game.sendToInput(this.dataset.verb);
            }
          });
          verbs.appendChild(btn);
        }, this);

        this.verbdocks.push(dock);
        break;
      //
      // default
      //
      default:
        msg = `createDock received an unknown class: ${properties.class}`;
        this.game.log("L1582", "warn", "high", msg, "GUI");
        return null;
    }

    this.docks.push(dock);

    if (!author_element) {
      this.displayEl.appendChild(dock);
    }
    return dock;
  };
})();