//initialize.js
(function () {
  /*global adventurejs A*/
  "use strict";

  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) {
    if ("string" === typeof displayElId) {
      this.displayEl = document.getElementById(displayElId);
    }

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

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

    this.titlebarEl = document.createElement("div");
    this.titlebarEl.classList.add("ajs-titlebar");
    this.displayEl.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.statusbarEl = document.createElement("div");
    this.statusbarEl.classList.add("ajs-statusbar");
    this.displayEl.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.displayEl.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.displayEl.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.reactor.dispatchEvent( this.game.events.inputEnter );
        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
  };
})();