const STATES = {
  open: "is-open",
};

export default class Navigation {
  constructor(cfg = {}) {
    if (!cfg.container) return false;
    if (!cfg.menu) return false;
    this.state = "hidden";
    this.container = cfg.container;
    this.menu = cfg.menu;
  }

  init() {
    if (!this.state) return false;
    this.container.setAttribute("aria-hidden", true);
    this.attachClickEvents();
    this.attachKeyEvents();
    return true;
  }

  attachClickEvents() {
    this.container.addEventListener("click", e => {
      if (this.container === e.target) {
        this.closeNav();
      }
    });
    this.menu.container.addEventListener("click", () => {
      this.openNav();
    });
    this.container
      .querySelector(".nav__close")
      .addEventListener("click", () => {
        this.closeNav();
      });
  }

  attachKeyEvents() {
    const first = this.container.querySelector(".nav__link");
    const last = this.container.querySelector(".nav__close");
    this.container.addEventListener("keydown", e => {
      if (e.keyCode === 27) {
        this.closeNav();
      }
    });
    first.addEventListener("keydown", e => {
      if (e.shiftKey && e.keyCode === 9) {
        e.preventDefault();
        last.focus();
      }
    });
    last.addEventListener("keydown", e => {
      if (!e.shiftKey && e.keyCode === 9) {
        e.preventDefault();
        first.focus();
      }
    });
  }

  openNav() {
    this.lastActiveElement = document.activeElement;
    this.state = "visible";
    this.menu.hideMenu();
    this.container.classList.add(STATES.open);
    this.container.setAttribute("aria-hidden", false);
    this.container.querySelector(".nav__title-link").focus();
  }

  closeNav() {
    this.state = "hidden";
    this.menu.showMenu();
    this.container.classList.remove(STATES.open);
    this.container.setAttribute("aria-hidden", true);
    if (this.lastActiveElement) {
      this.lastActiveElement.focus();
    }
  }
}