export {};

const header = document.querySelector<HTMLElement>('.header-scroll');

console.log('Header JS loaded');

if (header) {
  const btnBurger = header.querySelector<HTMLButtonElement>('.burger-btn');
  const content = header.querySelector<HTMLElement>('.header__menu');

  if (btnBurger && content) {
    // ajoute une classe "hidden" à la barre de navigation lorsqu'on scroll (après 150 px et un scroll vers le bas)
    // et la retire lorsqu'on scroll vers le haut
    let lastScrollTop = 0;

    window.addEventListener('scroll', () => {
      const scroll = window.scrollY;

      // Si le menu n'est pas ouvert, on ajoute ou retire la classe hidden en fonction du scroll
      if (!content.classList.contains('show')) {
        if (scroll > lastScrollTop && scroll > 150) {
          header.classList.add('hidden');
        } else {
          header.classList.remove('hidden');
        }
      }

      lastScrollTop = scroll;
    });

    content.addEventListener('click', (event) => {
      const target = event.target as HTMLElement | null;

      if (target && !target.closest('.header__menu__content')) {
        // je ferme le menu
        content.classList.remove('show');
        btnBurger.classList.remove('active');
        document.body.style.overflow = 'visible';
      }
    });

    btnBurger.addEventListener('click', () => {
      // Lorsque le burger est cliqué, on retire la classe "hidden" pour ne pas interférer avec le scroll
      header.classList.remove('hidden');

      content.classList.toggle('show');
      btnBurger.classList.toggle('active');

      if (content.classList.contains('show')) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = 'visible';
      }
    });

    window.addEventListener('resize', () => {
      if (window.innerWidth >= 1366) {
        content.classList.remove('show');
        btnBurger.classList.remove('active');
        document.body.style.overflow = 'visible';
        header.classList.remove('hidden'); // Enlever la classe hidden sur les grands écrans
      }
    });
  }

  // Gestion du dépliage des sous-menus (mobile + desktop)
  const menu = header.querySelector<HTMLUListElement>('#menu-header');

  if (menu) {
    const submenuItems = menu.querySelectorAll<HTMLLIElement>('.menu-item-has-children');

    submenuItems.forEach((item) => {
      const link = item.querySelector<HTMLAnchorElement>('a');

      if (!link) {
        return;
      }

      link.addEventListener('click', (event) => {
        // Empêche la navigation immédiate pour permettre le dépliage
        event.preventDefault();

        const isOpen = item.classList.toggle('is-open');

        // Optionnel : refermer les autres sous-menus
        if (isOpen) {
          submenuItems.forEach((otherItem) => {
            if (otherItem !== item) {
              otherItem.classList.remove('is-open');
            }
          });
        }
      });
    });
  }
}