import '$utils/marquee';

import { animateNumberWithScrollTrigger } from '$utils/animateNumber';
import { blurIn } from '$utils/blurIn';
import { fadeIn } from '$utils/fadeIn';
import { greetUser } from '$utils/greet';
import { slideIn } from '$utils/slideIn';
import { staggeredIn } from '$utils/staggeredIn';

function applyAppearEffects() {
  // Sélecteurs pour les effets individuels
  const appearElements = document.querySelectorAll<HTMLElement>('[data-appear]');
  appearElements.forEach((el) => {
    // Ne pas traiter les enfants d'un parent staggered
    if (
      el.closest('[data-appear-stagger]') &&
      el.parentElement?.hasAttribute('data-appear-stagger')
    )
      return;
    const effect = el.getAttribute('data-appear');
    const delay = parseFloat(el.getAttribute('data-appear-delay') || '0') || 0;
    const duration = parseFloat(el.getAttribute('data-appear-duration') || '0') || undefined;
    if (effect === 'fade') {
      fadeIn(el, { delay, duration });
    } else if (effect === 'slide') {
      const direction = el.getAttribute('data-appear-direction') as
        | 'left'
        | 'right'
        | 'top'
        | 'bottom'
        | null;
      slideIn(el, { delay, duration, direction: direction ?? undefined });
    } else if (effect === 'blur') {
      blurIn(el, { delay, duration });
    }
  });

  // Gestion du staggered
  const staggerParents = document.querySelectorAll<HTMLElement>('[data-appear-stagger]');
  staggerParents.forEach((parent) => {
    const effect = parent.getAttribute('data-appear-stagger') || 'fade';
    const delayStep = parseFloat(parent.getAttribute('data-appear-stagger-step') || '0.12') || 0.12;
    const initialDelay = parseFloat(parent.getAttribute('data-appear-stagger-delay') || '0') || 0;
    let effectFn;
    if (effect === 'fade') effectFn = fadeIn;
    else if (effect === 'slide') effectFn = slideIn;
    else if (effect === 'blur') effectFn = blurIn;
    else effectFn = fadeIn;
    staggeredIn(parent, effectFn, { delayStep, initialDelay });
  });
}

window.Webflow ||= [];
window.Webflow.push(() => {
  const name = 'John Doeee';
  greetUser(name);
  animateNumberWithScrollTrigger();
  applyAppearEffects();
});