// createVerbDock.js

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

  var p = adventurejs.Display.prototype;

  /**
   * <strong>createVerbDock()</strong> is a method for creating
   * custom verb docks. It takes a generic object containing an id,
   * a list of verbs, and an optional list of css classes to be
   * applied to the element. Any verbs supplied will have buttons
   * created for them. Verb docks will be created at runtime, and
   * can be styled with any custom CSS.
   * To create a new verb dock:
   *
   * <pre class="display"><code class="language-javascript">MyGame.createVerbDock({
   *   "id":"MyVerbDock",
   *   "cssclasses":["custom"],
   *   "verbs": ["save","restore","examine","take","use","drop"],
   * });
   * </code></pre>
   *
   * For more information, see
   * <a href="/doc/GUI_VerbDocks.html">GUI Verb Dock</a>.
   * @method adventurejs.Display#createVerbDock
   * @param {Object} properties HTML ID, CSS classes, and verbs.
   * @returns {Element} Returns the HTML element of the verb dock.
   */
  p.createVerbDock = function Display_createVerbDock(properties) {
    console.warn("createVerbDock", properties);
    let author_element;
    let dock;

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

    let 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="verb name">${verb.verb}</span>`;
      //console.warn(verb.verb,this.game.image_lookup[verb.verb]);
      if (this.game.image_lookup[verb.verb]) {
        btn.classList.add("hasimage");
        btn.innerHTML += `<span class="verb 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);
    if (!author_element) {
      this.displayEl.appendChild(dock);
    }
    return dock;
  };
})();