// createVerbList.js

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

  var p = AdventureJS.Display.prototype;

  /**
   * <strong>createVerbList()</strong> is a method for creating
   * verb list widgets.
   * @method AdventureJS.Display#createVerbList
   * @param {Object} properties HTML ID and CSS classes.
   * @returns {Element} Returns the HTML element of the compass.
   */
  p.createVerbList = function Display_createVerbList(widget, properties = {}) {
    const {
      verbs = [],
      cssclasses = [],
      hide_labels = false,
      ...props
    } = properties;

    this.game.log("L1732", "log", 1, `[Display.js] createVerbList`, "Display");

    // @TODO need to add updateVerbListWidgets method
    // and a way to let autors revise verb lists
    // at run time
    widget.classList.add("ajs-verblist-widget");

    if (widget.hide_labels) {
      widget.classList.add("ajs-hide-labels");
    }

    var inner = document.createElement("div");
    inner.classList.add("ajs-inner", "ajs-scroll-container");
    widget.appendChild(inner);

    var content = document.createElement("div");
    content.classList.add("ajs-scroll-content");
    inner.appendChild(content);

    if (properties.clear) {
      let clearbtn = document.createElement("button");
      clearbtn.classList.add(
        "ajs-widget-button",
        "ajs-verb-button",
        "ajs-clear-verbs-button"
      );
      clearbtn.innerHTML = "&#x2716;";
      clearbtn.game = this.game;
      clearbtn.addEventListener("click", function () {
        this.game.clearInput();
      });
      content.appendChild(clearbtn);
    }

    if (properties.verbs) {
      properties.verbs.forEach(function (verb) {
        if ("string" === typeof verb) {
          verb = {
            verb: verb,
            parse: this.game.dictionary.verbs[verb]?.isIntransitive()
              ? true
              : false,
          };
        }
        let btn = document.createElement("button");
        btn.setAttribute("aria-label", verb.verb);
        btn.setAttribute("title", verb.verb);
        btn.setAttribute("aria-hidden", false);
        btn.setAttribute("tab-index", 0);
        btn.dataset.verb = verb.verb;
        btn.dataset.parse = verb.parse ? verb.parse : false;
        btn.classList.add(
          btn.dataset.verb,
          "ajs-widget-button",
          "ajs-verb-button"
        );
        if (verb.cssclasses) {
          for (var item in verb.cssclasses) {
            btn.classList.add(verb.cssclasses[item]);
          }
        }

        const src = this.game.getImage(verb.verb);
        if (src && widget.print_images) {
          btn.classList.add("hasimage");
          btn.innerHTML += `
            <span class="ajs-verb-image ajs-image-container ajs-button-image">${src}</span>`;
        }

        btn.innerHTML += `<span class="ajs-verb-name ajs-button-label">${verb.verb}</span>`;

        // hide_labels

        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 + " ");
            this.game.display.inputEl.focus();
          }
        });
        content.appendChild(btn);
      }, this);
    }

    return widget;
  };
})();