export default function menuInit() {
  let main_navigation = document.querySelector('#primary-menu');
  const header = document.querySelector('#primary-header');
  if (!header) return;

  const primary_menu = header.querySelector('#primary-menu');
  const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');
  const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
  const menusWrapper = header.querySelector('.menus-wrapper');

  function closeSubmenus() {
    submenuToggles.forEach((button) => {
      button.setAttribute('aria-expanded', 'false');
      const sub = button.parentElement?.querySelector('.sub-menu');
      if (sub) sub.classList.remove('sub-menu-open');
    });
  }

  // #### Open/close burger nav
  mobileMenuToggle.addEventListener('click', function (e) {
    e.preventDefault();
    const isOpen = header.classList.contains('nav-open');
    header.classList.toggle('nav-open');
    mobileMenuToggle.toggleAttribute('aria-expanded');
    if (!isOpen) {
      gsap.from(menusWrapper, {
        opacity: 20,
        y: '-100vh',
        duration: 0.5,
        ease: Power4.easeOut,
      });
    }
  });

  // // #### Close nav when reaching the end of the menu with tab
  // document.addEventListener(
  //   'focusin',
  //   (e) => {
  //     const header = document.querySelector('#primary-header');
  //     if (
  //       header.classList.contains('nav-open') &&
  //       !header.contains(document.activeElement)
  //     ) {
  //       header.classList.remove('nav-open');
  //       burgerMenuToggle.setAttribute('aria-expanded', false);

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

  submenuToggles.forEach((button) => {
    button.addEventListener('click', function (e) {
      let isExpanded = button.getAttribute('aria-expanded') === 'true';

      closeSubmenus();
      if (!isExpanded) {
        button.setAttribute('aria-expanded', true);
        button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
      }
    });
  });

  document.addEventListener('click', (e) => {
    if (!header.contains(e.target)) {
      closeSubmenus();
    }
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      closeSubmenus();
    }
  });
}