import { greetUser } from '$utils/greet';
import { CoverUpEffect } from '$utils/CoverUpEffect';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { initScrollSvgAnimations } from '$utils/initScrollSvgAnimations';

window.Webflow ||= [];
window.Webflow.push(() => {
  gsap.registerPlugin(ScrollTrigger);

  const name: string = 'Localhost';
  greetUser(name);

  /*
  NAVBAR APPARITION
  */

  // Récupérer les éléments nécessaires
  const triggerSection = document.querySelector<HTMLElement>('.hero_grid');
  const navbar = document.querySelector<HTMLElement>('.navbar_component');

  if (!triggerSection || !navbar) {
    console.warn('Required elements (.hero_grid or .navbar_component) not found.');
    return;
  }

  // Fonction pour gérer l'apparition de la navbar
  function handleNavbarVisibility(): void {
    const triggerPosition = triggerSection.getBoundingClientRect().top;
    const isMobile = window.innerWidth < 992;

    if (isMobile) {
      // Pour les écrans inférieurs à 992px : toujours visible
      navbar.classList.add('visible');
      navbar.classList.remove('hidden');
    } else {
      // Pour les écrans de 992px ou plus : basé sur le scroll
      if (triggerPosition <= 0) {
        navbar.classList.add('visible');
        navbar.classList.remove('hidden');
      } else {
        navbar.classList.remove('visible');
      }
    }
  }

  // Appel immédiat pour initialiser la navbar
  handleNavbarVisibility();

  // Écouteurs pour les événements
  document.addEventListener('scroll', handleNavbarVisibility);
  window.addEventListener('resize', handleNavbarVisibility);

  /*
  MARQUEE 
  */

  // Sélectionnez tous les wrappers de marquee
  const marqueeWrappers = document.querySelectorAll('.marquee_wrapper');

  // Pour chaque wrapper de marquee
  marqueeWrappers.forEach((marqueeWrapper) => {
    const marqueeLists = marqueeWrapper.querySelectorAll('.marquee_list');

    // Cloner les listes pour créer un effet de boucle continue
    marqueeLists.forEach((list) => {
      const clone = list.cloneNode(true);
      marqueeWrapper.appendChild(clone);
    });

    // Largeur totale de la liste avec la marge incluse
    const marqueeWidth =
      marqueeLists[0].offsetWidth + parseInt(getComputedStyle(marqueeLists[0]).marginRight);

    // Créez une animation unique pour ce wrapper
    gsap.to(marqueeWrapper.children, {
      x: `-${marqueeWidth}px`, // Déplace la largeur complète, incluant la marge
      duration: 24, // Temps de défilement (ajustez selon vos besoins)
      ease: 'none', // Mouvement linéaire pour un effet fluide
      repeat: -1, // Boucle infinie
    });
  });

  /***** 
  SHOW/HIDE TEXT BUTTON
  *****/

  // Show / hide text behavior
  const buttons: NodeListOf<HTMLButtonElement> = document.querySelectorAll('.expand-button');
  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      const textContainer = button.closest('.global-hidden_text-ctn');
      const hiddenText = textContainer?.querySelector<HTMLElement>('.hidden-text');

      if (hiddenText) {
        const isHidden = hiddenText.style.display === 'none' || !hiddenText.style.display;
        hiddenText.style.display = isHidden ? 'inline' : 'none';

        // Check the initial text content and toggle accordingly
        if (
          button.textContent?.trim().toLowerCase() === 'learn more' ||
          button.textContent?.trim().toLowerCase() === 'show less'
        ) {
          button.textContent = isHidden ? 'Show less' : 'Learn more';
        } else if (
          button.textContent?.trim().toLowerCase() === 'en savoir plus' ||
          button.textContent?.trim().toLowerCase() === 'voir moins'
        ) {
          button.textContent = isHidden ? 'Voir moins' : 'En savoir plus';
        }
      }
    });
  });

  // SVG COLOR ANIMATION ON MOBILE
  initScrollSvgAnimations();

  // COVER UP ANIMATION ON DESKTOP
  if (window.innerWidth > 991) CoverUpEffect();
});