// updateRoomExitsWidgets.js

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

  var p = AdventureJS.Display.prototype;

  /**
   * Update exits in exit widgets.
   * @method AdventureJS.Display#updateRoomExitsWidgets
   * @param {Object} properties
   */
  p.updateRoomExitsWidgets = function Display_updateRoomExitsWidgets(
    properties
  ) {
    if (this.room_exits_widgets.length === 0) return;
    const room = this.game.world[this.game.world._room];
    const game = this.game;

    this.room_exits_widgets.forEach(function (widget) {
      let html = "";

      if (room.isDark()) {
        html = ""; // @TODO
      } else {
        if (widget.format === "list") {
          const exits = game.getRoom().getExits();
          for (const exit in exits) {
            let asset = game.getAsset(exits[exit]);
            let image = "";
            let hasimage = "";
            if (asset.image) {
              image = `
                <span class="ajs-exit-image">
                  <img src="${game.image_lookup[asset.image].src}"/>
                </span>`;
              hasimage = "hasimage";
            }
            let itemhtml = `
              <button 
                data-id="${asset.id}" 
                data-name="${asset.name}" 
                class="button ajs-widget-button ajs-exit-button id_${asset.id} class_${asset.class} ${hasimage}" 
                data-name="${asset.name}"
                data-direction="${asset.direction}"
              >
                <span class="ajs-exit-name">
                  ${game.getExtendedExitName(asset)}
                </span>
                <span class="ajs-exit-image">
                  ${image}
                </span>
              </button>
            `;
            html += itemhtml;
          }
        } else {
          html = game.renderPlaceholders(game.getRoomExits());
        }
      }

      html = `
        <div class="ajs-inner ajs-scroll-container">
          <div class="ajs-scroll-content">
            <div class="ajs-room-exits-container">
                ${html}
            </div>
          </div>
        </div>
      `;

      widget.innerHTML = html;

      widget.querySelectorAll(".ajs-exit-button").forEach(function (el) {
        el.game = game;
        el.addEventListener("click", function () {
          if (this.game.display.inputEl.value.length) {
            this.game.sendToInput(` ${el.dataset.direction}`);
          } else {
            this.game.sendToParser(
              `${widget.verb || "go"} ${el.dataset.direction}`
            );
          }
        });
      }, this);
    });
  };
})();