import { gsap } from "@/lib/gsap";

export class ConfortableCardsAnimation {
  private mm: gsap.MatchMedia;

  constructor() {
    this.mm = gsap.matchMedia();
    this.init();
  }

  private init(): void {
    this.mm.add("(min-width: 768px)", () => {
      const confortableSection = document.querySelector<HTMLElement>("#confortable-section");
      const cards = document.querySelectorAll<HTMLDivElement>(".flip-card");
      const cardsContainer = document.querySelector<HTMLDivElement>(".cards-container");
      const cardsBackface = document.querySelectorAll<HTMLDivElement>(".flip-card-back");
      const confortableText = document.querySelector<HTMLDivElement>("#confortable-text");

      if (!confortableSection || !cards.length || !cardsContainer || !cardsBackface.length || !confortableText) {
        return;
      }

      gsap.set([cardsBackface, cards], { rotationY: 180 });
      gsap.set(cardsContainer, {
        scale: 0.8,
        y: 50,
        willChange: "transform",
        rotate: 0.001,
      });
      gsap.set(confortableText, { autoAlpha: 0, y: 50 });
      gsap.set(cards[0], {
        borderTopLeftRadius: "1.5rem",
        borderBottomLeftRadius: "1.5rem",
        x: 1,
      });
      gsap.set(cards[2], {
        borderTopRightRadius: "1.5rem",
        borderBottomRightRadius: "1.5rem",
        x: -3,
      });

      gsap
        .timeline({
          scrollTrigger: {
            trigger: confortableSection,
            start: "top top",
            onEnter: () => {
              if (!window.animationConfortableComplete) window.lenis?.stop();
            },
          },
          onComplete: () => {
            window.animationConfortableComplete = true;
            window.lenis?.start();
          },
          defaults: { duration: 1 },
        })
        .to(cardsContainer, {
          scale: 1,
          y: 0,
          ease: "expo.inOut",
          duration: 2,
          rotation: 0.001,
        })
        .to(cardsContainer, {
          gap: "1.5rem",
          ease: "power3.out",
        })
        .to(
          cards,
          {
            borderRadius: "1rem",
            ease: "power3.out",
            boxShadow: "0.125rem 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.10)",
          },
          "<",
        )
        .to(
          cards,
          {
            rotationY: 0,
            ease: "expo.inOut",
            stagger: 0.1,
          },
          "<",
        )
        .to(
          confortableText,
          {
            autoAlpha: 1,
            y: 0,
            ease: "expo.inOut",
          },
          "<",
        );
    });
  }
}