// createInventoryDock.js

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

  var p = adventurejs.Display.prototype;

  /**
   * <strong>createInventoryDock()</strong> is a method for creating
   * custom inventory docks. It takes a generic object containing an
   * id and an optional list of css classes to be applied to the
   * element. Inventory docks will be created at runtime, and
   * can be styled with any custom CSS.
   * To create a new inventory dock:
   *
   * <pre class="display"><code class="language-javascript">MyGame.createInventoryDock({
   *   "id":"MyInventoryDock",
   *   "cssclasses":["custom"]
   * });
   * </code></pre>
   *
   * For more information, see
   * <a href="/doc/GUI_InventoryDocks.html">GUI Inventory Dock</a>.
   * @method adventurejs.Display#createInventoryDock
   * @param {Object} properties HTML ID, CSS classes, and verbs.
   * @returns {Element} Returns the HTML element of the verb dock.
   */
  p.createInventoryDock = function Display_createInventoryDock(properties) {
    console.warn("createInventoryDock", 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_inventorydock_container", "ajs-dock-wrapper");
    if (properties.cssclasses) {
      for (var item in properties.cssclasses) {
        dock.classList.add(properties.cssclasses[item]);
      }
    }
    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);
    if (!author_element) {
      this.displayEl.appendChild(dock);
    }
    return dock;
  };
})();