// createImageDock.js

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

  var p = adventurejs.Display.prototype;

  /**
   * <strong>createImageDock()</strong> is a method for creating
   * custom image docks. It takes a generic object containing an
   * id, an optional list of css classes to be applied to the
   * element, and an object containing image id / image url pairs.
   * Image docks will be created at runtime, and
   * can be styled with any custom CSS.
   * To create a new image dock:
   *
   * <pre class="display"><code class="language-javascript">MyGame.createImageDock({
   *   "id":"MyImageDock",
   *   "cssclasses":["custom"],
   *   "images": [
   *     [ "myimage_01": "/images/myimage_01.jpg" ],
   *     [ "myimage_02": "/images/myimage_02.jpg" ],
   *   ],
   * });
   * </code></pre>
   *
   * For more information, see
   * <a href="/doc/GUI_ImageDocks.html">Image Dock</a>.
   * @method adventurejs.Display#createImageDock
   * @param {Object} properties HTML ID, CSS classes, and verbs.
   * @returns {Element} Returns the HTML element of the verb dock.
   */
  p.createImageDock = function Display_createImageDock({
    id,
    cssclasses,
    type,
    messages,
  } = {}) {
    console.warn("createImageDock", { id, cssclasses, type, messages });
    let author_element;
    let dock;

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

    dock.game = this.game;
    if (messages) {
      dock.messages = messages;
    }
    dock.addEventListener("click", function (event) {
      console.warn("clicked dock");
      if (this.messages) {
        this.game.print(A.getSAF.call(this.game, this.messages));
      }
    });

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