//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {

    const header = document.querySelector('header[role="banner"]');
    const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
    const headerNavContainer = document.querySelector('.header_nav_container');
    const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
    const isTargetPath = window.location.pathname === '/';
  
    // Fonction pour démarrer l'animation du logo SVG
    function startLogoAnimation() {
      logo.classList.add('animated');
    }
  
    // Fonction pour arrêter l'animation du logo SVG
    function stopLogoAnimation() {
      logo.classList.remove('animated');
    }
  
    // Vérifier si le header a la classe header--collapse
    function checkHeaderCollapse() {
      if (header.classList.contains('header--collapsed')) {
        stopLogoAnimation();
      } else if (header.classList.contains('header--collapsed-already'))  {
          stopLogoAnimation();
        } else {
        startLogoAnimation();
      }
  
    }
  
    // Appeler la fonction au chargement initial
    checkHeaderCollapse();
  
    // Observer les changements de classe sur le header
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'class') {
          checkHeaderCollapse();
        }
      });
    });
    observer.observe(header, { attributes: true });
  
  
    // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
    if (!isFirstLoad || !isTargetPath) {
      header.classList.add('header--collapsed-already');
      // logo.classList.remove('animated');
      stopLogoAnimation();
    // } else {
    //   // Sinon, appliquer la transition après un délai
    //   setTimeout(() => {
    //       header.classList.add('header--collapsed');
    //   }, 5000);
    // }
    } else {
      // Sinon, appliquer la transition après un délai, sauf si scroll
      let collapseTimeout = setTimeout(() => {
        header.classList.add('header--collapsed');
      }, 5000);
  
      function interruptCollapseOnScroll() {
        if (!header.classList.contains('header--collapsed')) {
          clearTimeout(collapseTimeout); // annule l'animation
          header.classList.add('header--collapsed');
        }
        window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
      }
  
      window.addEventListener('scroll', interruptCollapseOnScroll);
    }
    //////////////////////////////////////
  
    let lastScrollTop = 0;
    let threshold = 100; // Change this value as needed
    let isHidden = false;
  
    function slideOut() {
      headerNavContainer.animate([
        { transform: 'translateX(0)' },
        { transform: 'translateX(-100%)' }
      ], {
        duration: 300,
        fill: 'forwards'
      });
      isHidden = true;
    }
  
    function slideIn() {
      headerNavContainer.animate([
        { transform: 'translateX(-100%)' },
        { transform: 'translateX(0)' }
      ], {
        duration: 300,
        fill: 'forwards'
      });
      isHidden = false;
    }
    
    function slideDown() {
      // headerNavContainer.style.display = 'block';
      headerNavContainer.animate([
        { transform: 'translateY(0%)' },
        { transform: 'translateY(+100%)' }
      ], {
        duration: 300,
        fill: 'forwards'
      });
      isHidden = false;
    }
  
    function slideUp() {
      headerNavContainer.animate([
        { transform: 'translateY(100%)' },
        { transform: 'translateY(0%)' }
      ], {
        duration: 300,
        fill: 'forwards'
      }).onfinish = function() {
        // headerNavContainer.style.display = 'none';
      };
      isHidden = true;
    }
      // Fonction pour ajuster la hauteur du header lors du défilement
      function adjustHeaderHeight() {
        if (window.scrollY > 0) {
          header.classList.add('shrink');
        } else {
          header.classList.remove('shrink');
        }
      }
  
    function handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const isMobile = window.innerWidth < 811;
  
      if (scrollTop > threshold && !isHidden) {
        if (isMobile) {
          slideUp();
        } else {
          slideOut();
        }
      } else if (scrollTop <= threshold && isHidden) {
        if (isMobile) {
          slideDown();
        } else {
          slideIn();
        }
      }
  
  
      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
    }
  
    function handleTouchAndMouseEnter() {
      if (isHidden) {
        if (window.innerWidth < 811) {
          slideDown();
        } else {
          slideIn();
        }
      }
    }
  
    function handleTouchAndMouseLeave() {
      if (lastScrollTop > threshold && !isHidden) {
        if (window.innerWidth < 811) {
          slideUp();
        } else {
          slideOut();
        }
      }
    }
  
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('scroll', adjustHeaderHeight);
  
    // Mouse events for desktop
    header.addEventListener('mouseenter', handleTouchAndMouseEnter);
    header.addEventListener('mouseleave', handleTouchAndMouseLeave);
  
    // Touch events for tablets and mobile devices
    header.addEventListener('touchstart', handleTouchAndMouseEnter);
    header.addEventListener('touchend', handleTouchAndMouseLeave);
  
    // Initial check to see if we're at the top of the page
    if (window.pageYOffset <= threshold) {
      if (window.innerWidth < 811) {
        slideDown();
      } else { 
        slideIn();
      } 
    } else {
      if (window.innerWidth < 811) {
        slideUp();
      } else {
        slideIn();
      }
    }
  
  });
  
  //////// end header ////////////
  