class Sidebar {
  constructor() {
    this._sidebar = document.querySelector("#sidebar");
    this._sidebarButton = document.querySelector("#panel-button");
    this._closeButton = document.querySelector("#close-panel-button");
    this._visible = false;
    this._init();
  }

  showSidebar() {
    this._sidebar.classList.remove("hide");
    wait(100).then(() => {
      this._closeButton.focus();
    });
    this._visible = true;
  }

  hideSidebar() {
    this._sidebar.classList.add("hide");
    this._sidebarButton.focus();
    this._visible = false;
  }

  toggleSidebar() {
    if (this._visible) {
      this.hideSidebar();
    } else {
      this.showSidebar();
    }
  }

  _setKeydown() {
    this._sidebar.addEventListener("keydown", (ev) => {
      if (ev.keyCode == 27) {
        this.hideSidebar();
      }
    });
  }

  _setSidebar() {
    document.querySelector("#screen").addEventListener("click", (ev) => {
      if (
        ev.target == this._sidebarButton ||
        ev.target.parentElement == this._sidebarButton
      ) {
        this.toggleSidebar();
      } else if (
        ev.target != this._sidebar &&
        ev.target.closest(".panel") == null
      ) {
        this._sidebar.classList.add("hide");
        this._visible = false;
      }

      if (
        ev.target == this._closeButton ||
        ev.target.parentElement == this._closeButton
      ) {
        this.hideSidebar();
      }
    });

    document.querySelector("#screen").addEventListener("focusin", (ev) => {
      if (!this._sidebar.contains(document.activeElement)) {
        this._sidebar.classList.add("hide");
        this._visible = false;
      }
    });
  }

  _init() {
    this._setSidebar();
    this._setKeydown();
  }
}