Untitled

/* eslint no-console: ["error", { allow: ["warn", "error", "log"] }] */

// import Logger from '../legacy-core/logger';

class Navigation {

  constructor() {
    const searchToggles = document.querySelectorAll('.js-search-toggle');
    const propertyFinderToggles = document.querySelectorAll('.js-property-finder-toggle');
    const loginToggles = document.querySelectorAll('.js-login-toggle');
    const body = document.querySelector('body');
    let menuActive = false;

    function navInit() {
      const navMain = document.querySelector('.js-nav-main');
      const navToggle = document.querySelector('.js-nav-toggle');
      const hasChildren = navMain.querySelectorAll('.has-children');
      const navActiveClass = 'nav--active';
      const navButtonClass = 'nav--button--active';
      const navBodyClass = 'overlay-lock';
      let openChildMenu;
      let openGrandchildMenu;
      let activeButton;
      // NAV TOGGLE
      navToggle.addEventListener('click', (e) => {
        e.stopPropagation();
        navToggle.classList.toggle(navActiveClass);
        body.classList.toggle(navBodyClass);
        if (body.classList.contains('search--active')) {
          body.classList.remove('search--active');
        }

        if (body.classList.contains('property-finder--active')) {
          body.classList.remove('property-finder--active');
        }

        if (body.classList.contains('login--active')) {
          body.classList.remove('login--active');
        }

        if (menuActive === true) {
          menuActive = false;
          navMain.classList.remove(navActiveClass);
          if (openChildMenu) {
            openChildMenu.classList.remove(navActiveClass);
            openChildMenu = null;
          }
          if (openGrandchildMenu) {
            openGrandchildMenu.classList.remove(navActiveClass);
            openGrandchildMenu = null;
          }
        } else if (menuActive === false) {
          menuActive = true;
          navMain.classList.add(navActiveClass);
        }
      });

      // navToggle.addEventListener('keyup', (event) => {
      //   if (event.key === 'Enter') {
      //     navToggle.classList.toggle(navActiveClass);
      //     body.classList.toggle(navBodyClass);
      //     // slideToggle(navMain, 250);
      //   }
      // });

      // MOBILE NAV
      hasChildren.forEach((child) => {
        const childButton = child.querySelector('.js-btn-nav');
        const childMenu = child.querySelector('.js-nav-child');
        const hasGrandChildren = child.querySelectorAll('.has-grandchildren');
        const closeChildButton = child.querySelector('.js-btn-nav-back');

        childButton.addEventListener('click', (event) => {

          if (body.classList.contains('search--active')) {
            body.classList.remove('search--active');
          }

          if (body.classList.contains('property-finder--active')) {
            body.classList.remove('property-finder--active');
          }

          if (openChildMenu && event.target !== activeButton) {
            openChildMenu.classList.remove(navActiveClass);
            if (activeButton) {
              activeButton.classList.remove(navButtonClass);
            }
            childMenu.classList.add(navActiveClass);
            childButton.classList.add(navButtonClass);
          } else {
            childMenu.classList.toggle(navActiveClass);
            childButton.classList.toggle(navButtonClass);
          }
          openChildMenu = document.querySelector('.js-nav-child.nav--active');
          activeButton = document.querySelector('.js-btn-nav.nav--button--active');
        });

        closeChildButton.addEventListener('click', () => {
          childMenu.classList.remove(navActiveClass);
          openChildMenu = null;
        });

        hasGrandChildren.forEach((grandchild) => {
          const grandchildButton = grandchild.querySelector('.js-btn-nav');
          const grandchildMenu = grandchild.querySelector('.js-nav-grandchild');
          const closeGrandchildButton = grandchild.querySelector('.js-btn-nav-back');

          grandchildButton.addEventListener('click', () => {
            grandchildMenu.classList.toggle(navActiveClass);
            openGrandchildMenu = document.querySelector('.js-nav-grandchild.nav--active');
          });

          closeGrandchildButton.addEventListener('click', () => {
            grandchildMenu.classList.remove(navActiveClass);
            openGrandchildMenu = null;
          });
        });
      });
    }

    navInit();

    window.addEventListener('resize', navInit);

    searchToggles.forEach((searchToggle) => {
      searchToggle.addEventListener('click', () => {
        const navToggle = document.querySelector('.js-nav-toggle');
        const openMenu = document.querySelector('.js-nav-main.nav--active');
        const openChildMenu = document.querySelector('.js-nav-child.nav--active');
        const openGrandchildMenu = document.querySelector('.js-nav-grandchild.nav--active');
        if (body.classList.contains('property-finder--active')) {
          body.classList.remove('property-finder--active');
        }
        if (body.classList.contains('login--active')) {
          body.classList.remove('login--active');
        }
        if (openMenu) {
          openMenu.classList.remove('nav--active');
          navToggle.classList.remove('nav--active');
          menuActive = false;
        }
        if (openChildMenu) {
          openChildMenu.classList.remove('nav--active');
        }
        if (openGrandchildMenu) {
          openGrandchildMenu.classList.remove('nav--active');
        }
        document.querySelector('body').classList.toggle('search--active');
      });
    });
    loginToggles.forEach((loginToggle) => {
      loginToggle.addEventListener('click', () => {
        const navToggle = document.querySelector('.js-nav-toggle');
        const openMenu = document.querySelector('.js-nav-main.nav--active');
        const openChildMenu = document.querySelector('.js-nav-child.nav--active');
        const openGrandchildMenu = document.querySelector('.js-nav-grandchild.nav--active');
        if (body.classList.contains('property-finder--active')) {
          body.classList.remove('property-finder--active');
        }
        if (body.classList.contains('search--active')) {
          body.classList.remove('search--active');
        }
        if (openMenu) {
          openMenu.classList.remove('nav--active');
          navToggle.classList.remove('nav--active');
          menuActive = false;
        }
        if (openChildMenu) {
          openChildMenu.classList.remove('nav--active');
        }
        if (openGrandchildMenu) {
          openGrandchildMenu.classList.remove('nav--active');
        }
        document.querySelector('body').classList.toggle('login--active');
      });
    });
    propertyFinderToggles.forEach((propertyFinderToggle) => {
      propertyFinderToggle.addEventListener('click', () => {
        const navToggle = document.querySelector('.js-nav-toggle');
        const openMenu = document.querySelector('.js-nav-main.nav--active');
        const openChildMenu = document.querySelector('.js-nav-child.nav--active');
        const openGrandchildMenu = document.querySelector('.js-nav-grandchild.nav--active');
        if (body.classList.contains('search--active')) {
          body.classList.remove('search--active');
        }
        if (body.classList.contains('login--active')) {
          body.classList.remove('login--active');
        }
        if (openMenu) {
          openMenu.classList.remove('nav--active');
          navToggle.classList.remove('nav--active');
          menuActive = false;
        }
        if (openChildMenu) {
          openChildMenu.classList.remove('nav--active');
        }
        if (openGrandchildMenu) {
          openGrandchildMenu.classList.remove('nav--active');
        }
        document.querySelector('body').classList.toggle('property-finder--active');
      });
    });
  }
}

export default new Navigation();