import { gsap, Power1, Power2 } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger, Power1);

export const Animation = () => {
  const tl = gsap.timeline();

  tl.to('.header__item', { opacity: 1, duration: 1, stagger: 0.2, ease: Power1.easeOut }, '+=0.5');
  tl.to('.block-hero__title', { x: 0, opacity: 1, duration: 0.4, stagger: 0, ease: Power1.easeOut }, '0.9');
  tl.to('.block-hero__subtitle', { x: 0, opacity: 1, duration: 0.4, stagger: 0, ease: Power1.easeOut }, '1.1');
  tl.to('.block-hero__button', { x: 0, opacity: 1, duration: 0.4, stagger: 0, ease: Power1.easeOut }, '1.3');
  tl.to('.block-hero__item img', { scale: 1, opacity: 1, duration: 0.4, stagger: 0, ease: Power1.easeOut }, '1.3');
  solutionFirst();
  solutionMiddle();
  solutionLast();

  instrumentFirst();
  instrumentMiddle();
  instrumentLast();
}

const solutionFirst = () => {
  const demoItems = document.querySelectorAll('.demo__item');
  const trigger = document.querySelector('.block-solution__first');
  let time = 0.25;

  gsap.to('.block-solution__title', {
    scrollTrigger: trigger,
    y: 0,
    delay: 0.2,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });

  demoItems.forEach(item => {
    gsap.to(item, {
      scrollTrigger: trigger,
      y: 0,
      delay: time,
      duration: 0.5,
      opacity: 1,
      ease: Power2.easeOut
    })
    time += 0.2
  });

  gsap.to('.demo__button', {
    scrollTrigger: trigger,
    y: 0,
    delay: 0.5,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });
}

const solutionMiddle = () => {
  gsap.to('.block-solution__middle', {
    scrollTrigger: '.block-solution__middle',
    y: 0,
    delay: 0.2,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });
}

const solutionLast = () => {
  const trigger = document.querySelector('.block-solution__last');
  const chapterItems = document.querySelectorAll('.side__chapters');
  let time = 0.3;

  gsap.to('.side__title', {
    scrollTrigger: trigger,
    x: 0,
    delay: 0.2,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });

  chapterItems.forEach(item => {
    gsap.to(item, {
      scrollTrigger: trigger,
      x: 0,
      delay: time,
      duration: 0.5,
      opacity: 1,
      ease: Power2.easeOut
    })
    time += 0.1
  });

  gsap.to('.side img', {
    scrollTrigger: trigger,
    scale: 1,
    delay: 0.6,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });
}

const instrumentFirst = () => {
  const trigger = document.querySelector('.block-instrument__first');
  const title = trigger.querySelector('.block-instrument__title');
  const cardItems = trigger.querySelectorAll('.card');
  let time = 0.3;

  gsap.to(title, {
    scrollTrigger: trigger,
    y: 0,
    delay: 0.2,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });

  cardItems.forEach(item => {
    gsap.to(item, {
      scrollTrigger: trigger,
      y: 0,
      delay: time,
      duration: 0.5,
      opacity: 1,
      ease: Power2.easeOut
    })
    time += 0.1
  });

  gsap.to('.block-instrument__button', {
    scrollTrigger: trigger,
    y: 0,
    delay: 0.8,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });
}

const instrumentMiddle = () => {
  gsap.to('.block-instrument__middle img', {
    scrollTrigger: '.block-instrument__middle',
    scale: 1,
    delay: 0.2,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });
}

const instrumentLast = () => {
  const trigger = document.querySelector('.block-instrument__last');
  const title = trigger.querySelector('.block-instrument__title');
  const cardItems = trigger.querySelectorAll('.card');
  let time = 0.3;

  gsap.to(title, {
    scrollTrigger: trigger,
    y: 0,
    delay: 0.2,
    duration: 0.5,
    opacity: 1,
    ease: Power1.easeOut
  });

  cardItems.forEach(item => {
    gsap.to(item, {
      scrollTrigger: trigger,
      y: 0,
      delay: time,
      duration: 0.5,
      opacity: 1,
      ease: Power2.easeOut
    })
    time += 0.1
  });
}