class Header

class Header {
  get SELECTORS() {
  return {
    header: '.header',
    menuTrigger: '.header__menu_trigger',
    menuRow: '.menuRow',
    subMenuTrigger: '.subMenuTrigger',
    subMenuItem: '.subMenuItem',
  };
  }

  get CLASSNAMES() {
  return {
    bodyOpenMenuState: 'body--open_menu_state',
    subMenuItemStateClassName: 'sub_menu--active_state',
    subMenuTriggerStateClassName: 'menu__btn--active_state',
  };
  }

  constructor() {
  this.$body = document.body;
  this.$header = document.querySelector(this.SELECTORS.header);
  this.$menuTrigger = document.querySelectorAll(this.SELECTORS.menuTrigger);
  this.menuRow = document.querySelector(this.SELECTORS.menuRow);
  this.$subMenuTrigges = this.$header.querySelectorAll(this.SELECTORS.subMenuTrigger);
  this.$subMenuItems = this.$header.querySelectorAll(this.SELECTORS.subMenuItem);
  this.openMenuState = false;
  this.windowWidth = window.innerWidth;
  this.mediaPoint_1 = 1300;

  this.init = this.init.bind(this);
  this.init();
  }

  openMenu() {
  if (!this.openMenuState) {
    this.$body.classList.add(this.CLASSNAMES.bodyOpenMenuState);
    this.openMenuState = true;

    if (this.windowWidth < this.mediaPoint_1) {
    const headerHeight = this.$header.clientHeight;
    this.menuRow.style.top = `${headerHeight - 10 }px`; // eslint-disable-line
    }
  } else {
    this.$body.classList.remove(this.CLASSNAMES.bodyOpenMenuState);
    this.openMenuState = false;
  }
  }

  removeActiveState() {
  const $activeTriggerMenu = document.querySelector(`.${this.CLASSNAMES.subMenuTriggerStateClassName}`);
  const $activeMenu = document.querySelector(`.${this.CLASSNAMES.subMenuItemStateClassName}`);

  if (typeof ($activeTriggerMenu) !== 'undefined' && $activeTriggerMenu != null) {
    $activeTriggerMenu.classList.remove(this.CLASSNAMES.subMenuTriggerStateClassName);
  }
  if (typeof ($activeMenu) !== 'undefined' && $activeMenu != null) {
    $activeMenu.classList.remove(this.CLASSNAMES.subMenuItemStateClassName);
    $activeMenu.style.maxHeight = null;
  }
  }

  initsubMenu() {
  if (this.windowWidth < this.mediaPoint_1) {
    this.$subMenuItems.forEach((item) => {
    const $subMenuCloseTrigger = item.querySelector('.subMenuCloseTrigger');

    if (typeof ($subMenuCloseTrigger) !== 'undefined' && $subMenuCloseTrigger != null) {
      $subMenuCloseTrigger.addEventListener('click', () => {
      this.removeActiveState();
      });
    }
    });

    const menuOpen = (triggerData) => {
    this.$subMenuItems.forEach((menu) => {
      const dataMenu = menu.dataset.menu;
      if (triggerData === dataMenu) {
      menu.classList.add(this.CLASSNAMES.subMenuItemStateClassName);
      menu.style.maxHeight = menu.scrollHeight + 'px'; // eslint-disable-line
      }
    });
    };

    this.$subMenuTrigges.forEach((item, index) => {
    item.addEventListener('click', (e) => {
      const dataTriggerMenu = item.dataset.menu;
      if (!item.classList.contains(this.CLASSNAMES.subMenuTriggerStateClassName)) {
      this.removeActiveState();
      item.classList.add(this.CLASSNAMES.subMenuTriggerStateClassName);
      menuOpen(dataTriggerMenu);
      } else {
      if (item.classList.contains(this.CLASSNAMES.subMenuTriggerStateClassName) && !e.composedPath().includes('.sub_menu')) {
        this.removeActiveState();
      }
      }
    });
    });
  }
  }

  init() {
  if (typeof (this.$header) !== 'undefined' && this.$header != null) {
    // onWindowScroll(this.headerScroll);
    this.$menuTrigger.forEach(item => {
    item.addEventListener('click', () => {
      this.openMenu();
    });
    });

    if (this.$subMenuItems && this.$subMenuTrigges.length) {
    this.initsubMenu();
    }
  }
  }
}

export default Header;
// ------------ how init
// copy past this

// import this and if u need fix path
// import Header from './components/Header';

// add it in loadFunc
// const initHeader = new Header();

// this style for body and add some style to header
// body.body--open_menu_state {
// 	position: fixed;
// 	left: 0;
// 	top: 0;

// 	width: 100%;
// }