export default function menuInit() {
  const header = document.querySelector('#main-header');

  // Search module
  searchModule = header.querySelector('.search-module');
  const searchModuleToggle = header.querySelector('#search-module-toggle');

  // Submenus
  const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle');
  const submenusItems = header.querySelectorAll('.sub-menu');

  function isSubmenuOpen() {
    return header.querySelector('sub-menu-open') !== null;
  }

  function openSubmenu(buttonToggle) {
    closeSubmenus();
    let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
    buttonToggle.setAttribute('aria-expanded', !isExpanded);
    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
  }
  function closeSubmenus() {
    const openSubmenus = header.querySelectorAll('.sub-menu-open');
    openSubmenus.forEach((submenu) => {
      submenu.classList.remove('sub-menu-open');
      submenu.parentElement
        .querySelector('.menu-item-submenu-toggle')
        .setAttribute('aria-expanded', 'false');
      console.log(submenu.parentElement);
    });
  }
  

  function isSearchOpen() {
    return searchModule.getAttribute('aria-hidden') === 'true';
  }
  function openSearch() {
    searchModule.classList.remove('search-module-open');
    searchModule.classList.add('search-module-closed');
    setTimeout(() => {
      searchModule.setAttribute('aria-hidden', 'true');
    }, 400);
  }
  function closeSearch() {
    searchModule.setAttribute('aria-hidden', 'false');

    setTimeout(() => {
      searchModule.classList.remove('search-module-closed');
      searchModule.classList.add('search-module-open');
    }, 50);

    searchModuleToggle.toggleAttribute('aria-expanded');
  }

  // SEARCH TOGGLE open/close
  searchModuleToggle.addEventListener('click', function (e) {
    // const isSearchOpen = searchModule.getAttribute('aria-hidden') === 'true';
    closeSubmenus();
    // MENU IS OPEN --> CLOSE IT
    if (isSearchOpen()) {
      closeSearch();
      return;
    }
    // MENU IS CLOSED --> OPEN IT
    if (!isSearchOpen()) {
      openSearch();
    }
  });

  // SEARCH TOGGLE open/close
  submenuToggles.forEach((button) => {
    button.addEventListener('click', () => openSubmenu(button));
  });

  // #### BURGER TOGGLE open/close
  // const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
  // burgerMenuToggle.addEventListener('click', function (e) {
  //   e.preventDefault();
  //   header.classList.toggle('nav-open');
  //   burgerMenuToggle.toggleAttribute('aria-expanded');
  //   gsap.from(primary_menu, {
  //     opacity: 20,
  //     y: '-100vh',
  //     duration: 0.5,
  //     ease: Power4.easeOut,
  //   });
  // });

  // #### SUBMENUS TOGGLE open/close
  // const submenuToggles = primary_menu.querySelectorAll(
  //   '.menu-item-submenu-toggle'
  // );

  // #### Close nav when reaching the end of the menu with tab

  // document.addEventListener(
  //   'focusin',
  //   (e) => {
  //     const header = document.querySelector('#primary-header');
  //     console.log(header.contains(document.activeElement));
  //     if (header.classList.contains('nav-open') && !header.contains(document.activeElement)) {
  //       header.classList.remove('nav-open');
  //       burgerMenuToggle.setAttribute('aria-expanded', false);

  //       burgerMenuToggle.focus();
  //     }
  //   },
  //   true
  // );
}