import { gsap } from 'gsap';

import {
  extandCards,
  loadPage,
  loadVideoWhenInView,
  revealCards,
  revealHeading,
  scrollingMarquee,
} from '$utils/animateElement';

window.Webflow ||= [];
window.Webflow.push(() => {
  // Fonctions utilitaires
  // -- Fonction permettant la gestion du blur lors d'animations GSAP
  (function () {
    const blurProperty = gsap.utils.checkPrefix('filter'),
      blurExp = /blur\((.+)?px\)/,
      getBlurMatch = (target) =>
        (gsap.getProperty(target, blurProperty) || '').match(blurExp) || [];

    gsap.registerPlugin({
      name: 'blur',
      get(target) {
        return +getBlurMatch(target)[1] || 0;
      },
      init(target, endValue) {
        let data = this,
          filter = gsap.getProperty(target, blurProperty),
          endBlur = 'blur(' + endValue + 'px)',
          match = getBlurMatch(target)[0],
          index;
        if (filter === 'none') {
          filter = '';
        }
        if (match) {
          index = filter.indexOf(match);
          endValue = filter.substr(0, index) + endBlur + filter.substr(index + match.length);
        } else {
          endValue = filter + endBlur;
          filter += filter ? ' blur(0px)' : 'blur(0px)';
        }
        data.target = target;
        data.interp = gsap.utils.interpolate(filter, endValue);
      },
      render(progress, data) {
        data.target.style[blurProperty] = data.interp(progress);
      },
    });
  })();

  //chargement des fonctions
  loadVideoWhenInView();
  revealHeading();
  revealCards();
  loadPage();
  scrollingMarquee();
  //sectionDisappear();

  const mediaQuery = window.matchMedia('(min-width: 992px)');
  if (mediaQuery.matches) {
    // Si la media query est vraie (la fenêtre est de 992px ou plus)
    console.log('La fenêtre est de 992px ou plus');
    extandCards();
  }
});