// createWidget.js

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

  var p = AdventureJS.Display.prototype;

  /**
   * <strong>createWidget()</strong> is a method for creating
   * custom widgets. It takes a generic object containing an id,
   * and an optional list of css classes to be
   * applied to the element. Widgets will be created at runtime,
   * and can be styled with any custom CSS.
   * To create a new widget:
   *
   * <pre class="display"><code class="language-javascript">MyGame.createWidget({
   *   "id":"MyRoomWidget",
   *   "cssclasses":["custom"],
   * });
   * </code></pre>
   *
   * For more information, see
   * <a href="/doc/UI_Widgets.html">Widgets</a>.
   * @method AdventureJS.Display#createWidget
   * @param {Object} properties HTML ID, CSS classes, and verbs.
   * @returns {Element} Returns the HTML element of the verb widget.
   */
  p.createWidget = function Display_createWidget(properties = {}) {
    const {
      id = "",
      clas = "",
      cssclasses = "",
      type = "",
      clear = false,
      is,
      is_in,
      messages = "",
      region = region || "left",
      verbs = [],
      ...props
    } = properties;
    this.game.log(
      "L1729",
      "log",
      1,
      `[Display.js] createWidget ${properties.class}`,
      "Display"
    );
    let author_element;
    let widget;
    let msg = "";

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

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

    widget = author_element ? author_element : document.createElement("div");

    for (let property in properties) {
      widget[property] = properties[property];
    }
    widget.game = this.game;

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

    if (properties.title) {
      widget.style.setProperty("--ajs-widget-title", `"${properties.title}"`);
      widget.classList.add("has_title");
    }

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

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

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

    // class logic
    switch (properties.class.toLowerCase()) {
      //
      // room exits
      //
      case "roomexits":
        this.room_exits_widgets.push(widget);
        break;
      //
      // room image
      //
      case "roomimage":
        widget.classList.add("ajs-room-image-widget");
        if (properties.type) {
          widget.dataset.type = properties.type;
        }
        if (properties.messages) {
          widget.messages = properties.messages;
        }
        widget.addEventListener("click", function (event) {
          if (this.messages) {
            this.game.print(A.FX.getSAF.call(this.game, this.messages));
          }
        });
        this.room_image_widgets.push(widget);
        break;
      //
      // inventory list
      //
      case "inventorylist":
        if (properties.assetclasses) {
          widget.dataset.assetclasses = properties.assetclasses.join(",");
        }
        if (properties.is) {
          widget.dataset.is = properties.is.join(",");
        }
        if (properties.is_in) {
          widget.dataset.is_in = properties.is_in.join(",");
        }
        this.inventory_list_widgets.push(widget);
        break;
      //
      // object list
      //
      case "objectlist":
        this.object_list_widgets.push(widget);
        break;
      //
      // room description
      //
      case "roomdescription":
        this.room_description_widgets.push(widget);
        break;
      //
      // verb list
      //
      case "verblist":
        widget = this.createVerbList(widget, properties);
        this.verb_list_widgets.push(widget);
        break;
      //
      // object description
      //
      case "objectdescription":
        this.object_description_widgets.push(widget);
        break;
      //
      // compass
      //
      case "compass":
        this.createCompass({ ...properties, container: widget });
        this.compass_widgets.push(widget);
        break;
      //
      // default
      //
      default:
        msg = `createWidget received an unknown class: ${properties.class}`;
        this.game.log("L1582", "warn", "high", msg, "UI");
        return null;
    }

    this.widgets.push(widget);
    if (!author_element) {
      console.warn(region);
      this[`${region}RegionEl`].appendChild(widget);
    }
    return widget;
  };
})();