// RestartManager.js

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

  /**
   *
   * @class AdventureJS.RestartManager
   * @ajsnavheading EngineClasses
   * @param {Game} game A reference to the game instance.
   * @summary Manages the process of restarting games.
   * @classdesc
   * <p>
   * <strong>RestartManager</strong> manages the job of
   * restarting games. It contains all the methods needed
   * to create the Restart pop-up screen.
   * </p>
   * <p>
   * RestartManager is created automatically
   * by {@link AdventureJS.Game|Game}. This is an internal class that
   * authors should not need to construct or modify. However, if
   * you'd like to try, you can find styles for the Restart
   * pop-up in <a href="/css/adventurejs.css">adventurejs.css</a>.
   * All relevant styles are prefixed with '.restart_'.
   * </p>
   */
  class RestartManager {
    constructor(game) {
      /**
       * A reference back to the main {@link AdventureJS.Game|Game} object.
       * @var {Object} AdventureJS.RestartManager#game
       * @default {}
       */
      this.game = game;

      /**
       * Div element to contain the Restart dialog.
       * @var {HTMLElement} AdventureJS.RestartManager#restart_dialog
       * @default {}
       */
      this.restart_dialog = document.createElement("div");
      // this.restart_dialog = document.createElement("dialog");
      this.restart_dialog.classList.add("ajs-restart-dialog", "ajs-dialog");
      this.restart_dialog.setAttribute("aria-hidden", true);
      this.restart_dialog.setAttribute("aria-modal", true);
      this.restart_dialog.role = "dialog";
      this.restart_dialog.style.display = "none";
      this.restart_dialog.tabIndex = "1";
      this.restart_dialog.setAttribute(
        "aria-labelledby",
        `${this.game.game_name}-restart-dialog-title`
      );
      this.game.display.dialogsEl.appendChild(this.restart_dialog);

      // Source HTML is stored in RestartManager.html
      this.restart_dialog.innerHTML = `
        <div class="ajs-restart-dialog-outer ajs-dialog-outer">
          <div class="ajs-restart-dialog-inner ajs-dialog-inner">
            
            <button id="${this.game.game_name}-restart-dialog-cancel-button"
              class="ajs-restart-dialog-cancel-button ajs-cancel-button ajs-button ajs-dialog-button button-secondary"
              type="button"
              value="Cancel"
              name="restartCancel"
            >
              Cancel
            </button>
            
            <button id="${this.game.game_name}-restart-dialog-button"
              class="ajs-restart-dialog-button ajs-restart-button ajs-button ajs-dialog-button button-secondary"
              type="button"
              value="Restart"
              name="restart"
            >
              Restart
            </button>

          </div> 
          <!-- /ajs-restart-dialog-inner -->
        </div>
        <!-- /ajs-restart-dialog-outer -->
      `;

      this.restart_button = this.game.display.displayEl.querySelector(
        `#${this.game.game_name}-restart-dialog-button`
      );
      this.restart_button.manager = this;

      this.restart_button.addEventListener("click", function () {
        this.manager.clickRestart();
      });

      this.cancel_button = this.game.display.displayEl.querySelector(
        `#${this.game.game_name}-restart-dialog-cancel-button`
      );
      this.cancel_button.manager = this;

      this.cancel_button.addEventListener("click", function () {
        this.manager.closeDialog();
      });

      this.handleEscape = this.handleEscape.bind(this); // Bind once
    } // constructor

    /**
     * Open the Restart modal dialog.
     * @memberOf AdventureJS.RestartManager
     * @method AdventureJS.RestartManager#openDialog
     * @kind function
     */
    openDialog() {
      // this.restart_dialog.showModal();

      // deactivate main content
      document.activeElement.blur();
      this.game.display.contentEl.blur();
      this.game.display.contentEl.setAttribute("aria-hidden", true);
      this.game.display.contentEl.setAttribute("inert", "");

      // activate dialog
      this.restart_dialog.style.display = "block";
      this.restart_dialog.classList.add("active");
      this.restart_dialog.setAttribute("aria-hidden", false);
      this.restart_dialog.focus();

      document.addEventListener("keyup", this.handleEscape);

      // delay because the select doesn't work without it
      setTimeout(
        function (restartManager) {
          restartManager.restart_button.focus();
        },
        50,
        this
      );
    }

    /**
     * Close the Restart modal dialog.
     * @memberOf AdventureJS.RestartManager
     * @method AdventureJS.RestartManager#closeDialog
     * @kind function
     */
    closeDialog() {
      document.removeEventListener("keyup", this.handleEscape);
      this.restart_dialog.classList.remove("active");

      // MODAL VERSION
      // this.restart_dialog.close();

      // NON-MODAL VERSION
      document.activeElement.blur();
      this.restart_dialog.setAttribute("aria-hidden", true);
      setTimeout(() => {
        this.restart_dialog.style.display = "none";
        this.game.display.contentEl.setAttribute("aria-hidden", false);
        this.game.display.contentEl.removeAttribute("inert");
        // set focus on input
        this.game.display.inputEl.focus();
      }, 250);
    }

    /**
     * Function that closes the dialog on escape keyup.
     * @param {*} event
     */
    handleEscape(event) {
      var key = event.which || event.keyCode;
      if (key === 27) {
        event.stopPropagation();
        this.clickClose(this);
      }
    }

    /**
     * Function that gets called by the Close button.
     * @memberOf AdventureJS.RestoreManager
     * @method AdventureJS.RestoreManager#clickClose
     * @kind function
     */
    clickClose() {
      console.log("clickClose");
      this.closeDialog();
      var msg = "Restart cancelled.";
      this.game.print(msg);
      return;
    }

    /**
     * Restart.
     * @memberOf AdventureJS.RestartManager
     * @method AdventureJS.RestartManager#clickRestart
     * @kind function
     */
    clickRestart() {
      location.reload();
    }

    /**
     * Provides a chainable shortcut method for setting a number of properties on the instance.
     * @method AdventureJS.RestartManager#set
     * @param {Object} props A generic object containing properties to copy to the DisplayObject instance.
     * @returns {AdventureJS.RestartManager} Returns the instance the method is called on (useful for chaining calls.)
     * @chainable
     */
    set(props) {
      return A.FX.deepSet.call(this.game, props, this);
    }
  }
  AdventureJS.RestartManager = RestartManager;
})();