//initialize.js
(function () {
  /*global adventurejs A*/

  var p = adventurejs.Display.prototype;

  /**
   * Initialize the game display.
   * Creates all the necessary HTML elements.
   * @method adventurejs.Display#initialize
   * @param {Object} props A generic object containing properties to copy to the DisplayObject instance.
   * @returns {adventurejs.Display} Returns the instance the method is called on (useful for chaining calls.)
   */
  p.initialize = function Display_initialize(displayElId) {
    // Get user's saved theme or system preference
    function getPreferredTheme() {
      return (
        localStorage.getItem("theme") ||
        (window.matchMedia("(prefers-color-scheme: dark)").matches
          ? "dark"
          : "light")
      );
    }
    const theme = getPreferredTheme();

    // Get the specified display element...
    if ("string" === typeof displayElId) {
      this.displayEl = document.getElementById(displayElId);
    }

    // ...or create one, if none provided
    if (!this.displayEl) {
      let el = document.createElement("div");
      el.setAttribute("id", displayElId);
      document.getElementsByTagName("body")[0].appendChild(el);
      this.displayEl = el;
    }

    this.displayEl.classList.add("ajs-display", theme);
    this.displayEl.dataset.theme = theme;
    this.displayElId = displayElId;

    this.contentEl = document.createElement("div");
    this.contentEl.classList.add("ajs-content");
    this.displayEl.appendChild(this.contentEl);

    this.dialogsEl = document.createElement("div");
    this.dialogsEl.classList.add("ajs-dialogs");
    this.displayEl.appendChild(this.dialogsEl);

    this.titlebarEl = document.createElement("div");
    this.titlebarEl.classList.add("ajs-titlebar");
    this.contentEl.appendChild(this.titlebarEl);

    this.titleEl = document.createElement("span");
    this.titleEl.classList.add("ajs-title");
    this.titleEl.innerText = "Unnamed Game";
    this.titlebarEl.appendChild(this.titleEl);

    this.versionEl = document.createElement("span");
    this.versionEl.classList.add("ajs-version");
    this.versionEl.innerText = "v0.0";
    this.titlebarEl.appendChild(this.versionEl);

    this.authorEl = document.createElement("span");
    this.authorEl.classList.add("ajs-author");
    this.authorEl.innerText = "Unnamed Author";
    this.titlebarEl.appendChild(this.authorEl);

    this.themerEl = document.createElement("div");
    this.themerEl.classList.add("ajs-themer-container");
    this.titlebarEl.appendChild(this.themerEl);
    this.themerEl.innerHTML = `
      <label for="${this.game.game_name}-ajs-themer" class="ajs-hidden-label">Choose a Theme:</label>
      <select id="${this.game.game_name}-ajs-themer" class="ajs-themer">
        <option value="light" ${theme === "light" ? "selected" : ""}>Light</option>
        <option value="dark" ${theme === "dark" ? "selected" : ""}>Dark</option>
        <!-- <option value="solarized" ${theme === "solarized" ? "selected" : ""}>Solarized</option> -->
        <!-- <option value="high-contrast" ${theme === "dark" ? "high-contrast" : ""}>High Contrast</option> -->
      </select>
    `;

    const themer = this.themerEl;
    const self = this;

    // Apply theme and update UI
    function applyTheme(theme) {
      document.documentElement.setAttribute("data-theme", theme);
      self.displayEl.setAttribute("data-theme", theme);
      localStorage.setItem("theme", theme);
      themer.value = theme; // Update dropdown selection
    }

    // Listen for dropdown changes
    this.themerEl.addEventListener("change", (event) => {
      applyTheme(event.target.value);
    });

    // Apply stored or system-preferred theme on load
    applyTheme(getPreferredTheme());

    // --------------------------------------------------

    this.statusbarEl = document.createElement("div");
    this.statusbarEl.classList.add("ajs-statusbar");
    this.contentEl.appendChild(this.statusbarEl);

    this.exitsContainerEl = this.createCompass({
      statusbar: true,
      createnodes: true,
      cssclasses: ["statusbar"],
    });
    this.statusbarEl.appendChild(this.exitsContainerEl);
    if (!this.game.settings.show_compass_rose_in_status) {
      this.exitsContainerEl.classList.add("hidden");
    }
    if (this.game.settings.magnify_compass_rose_on_hover) {
      this.exitsContainerEl.classList.add("magnify");
    }

    this.roomEl = document.createElement("span");
    this.roomEl.classList.add("ajs-room");
    this.statusbarEl.appendChild(this.roomEl);

    this.scoreEl = document.createElement("span");
    this.scoreEl.classList.add("ajs-score");
    this.statusbarEl.appendChild(this.scoreEl);

    this.outputWrapperEl = document.createElement("div");
    this.outputWrapperEl.classList.add("ajs-output-wrapper");
    this.contentEl.appendChild(this.outputWrapperEl);

    this.outputEl = document.createElement("div");
    this.outputEl.classList.add("ajs-output");
    this.outputWrapperEl.appendChild(this.outputEl);

    this.inputContainerEl = document.createElement("div");
    this.inputContainerEl.classList.add("ajs-input-wrapper");
    this.contentEl.appendChild(this.inputContainerEl);

    this.inputPromptEl = document.createElement("span");
    this.inputPromptEl.classList.add("ajs-input-arrow");
    this.inputPromptEl.innerHTML = ">";
    this.inputContainerEl.appendChild(this.inputPromptEl);

    this.inputEl = document.createElement("input");
    //this.inputEl.pattern = "[A-Za-z0-9'-+\"]+";
    this.inputEl.maxLength = 75;
    this.inputEl.placeholder = "type your input here";
    this.inputEl.display = this; // give input a reference back to display
    this.inputEl.game = this.game; // give input a reference back to game
    this.inputEl.setAttribute("id", this.game.game_name + "-" + "ajs-input");
    this.inputEl.setAttribute("autocomplete", "off");
    this.inputEl.classList.add("ajs-input");
    this.inputContainerEl.appendChild(this.inputEl);

    this.inputEl.addEventListener("input", function (event) {
      // Check if the input has text
      if (!this.value || this.value === "" || !this.value.length) {
        this.display.inputContainerEl.classList.remove("active");
        // this.display.clearBtn.classList.remove('active');
      } else {
        this.display.inputContainerEl.classList.add("active");
        // this.display.clearBtn.classList.add('active');
      }
    }); // input

    this.inputEl.addEventListener("keyup", function (event) {
      if (event.key === "Enter") {
        this.game.sendToParser(this.value);
      } else if (event.key === "ArrowUp") {
        this.value = this.game.parser.getOlderInput();
      } else if (event.key === "ArrowDown") {
        this.value = this.game.parser.getNewerInput();
      }
    }); // keyup

    this.clearBtn = document.createElement("button");
    this.clearBtn.classList.add("clear", "icon");
    this.clearBtn.display = this;
    this.inputContainerEl.appendChild(this.clearBtn);
    this.clearBtn.addEventListener("click", function () {
      this.display.clearInput();
    });

    this.enterBtn = document.createElement("button");
    this.enterBtn.classList.add("enter", "icon");
    this.enterBtn.display = this;
    this.enterBtn.game = this.game;
    this.inputContainerEl.appendChild(this.enterBtn);
    this.enterBtn.addEventListener("click", function () {
      this.game.sendToParser(this.display.inputEl.value);
    });

    this.displayEl.classList.remove("unplayed", "loading");
    this.displayEl.classList.add("initialized");

    //this.inputEl.focus(); // commented because it interferes with doc pages
  };
})();