import { gsap, Power4 } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { headerRemoveWhite, headerWhite } from "../header/Header";

gsap.registerPlugin(ScrollTrigger, Power4);

export const firstAnimation = () => {
  gsap.to(".js-about-animation-left-1", {x: 0, duration: .65, opacity: 1, delay: .5});
  gsap.to(".js-about-animation-left-2", {x: 0, duration: .52, opacity: 1, delay: .5});
  gsap.to(".js-about-animation-left-3", {x: 0, duration: .43, opacity: 1, delay: .5});
  gsap.to(".js-about-animation-left-4", {x: 0, duration: .65, opacity: 1, delay: .5});
  gsap.to(".js-about-animation-right-1", {x: 0, duration: .55, opacity: 1, delay: .5});
  gsap.to(".js-about-animation-right-2", {x: 0, duration: .45, opacity: 1, delay: .5});
  const firstBlock = document.querySelector('.main-screen__first-animation');

  if (firstBlock) {
    gsap.to(".main-screen__first-animation-span-left-1", {left: 1200, duration: 1, opacity: 0, delay: .3});
    gsap.to(".main-screen__first-animation-span-left-2", {left: 1200, duration: 1, opacity: 0, delay: .3});
    gsap.to(".main-screen__first-animation-span-left-3", {left: 1200, duration: 1, opacity: 0, delay: .3});
    gsap.to(".main-screen__first-animation-span-right-1", {left: -1200, duration: 1, opacity: 0, delay: .3});
    gsap.to(".main-screen__first-animation-span-right-2", {left: -1200, duration: 1, opacity: 0, delay: .3});

    setTimeout(() => {
      firstBlock.remove();
    }, 1300);
  }
}

export const twoAnimation = () => {
  gsap.to('.main-screen__title', {
    y: 0,
    opacity: 1,
    duration: .5,
  });

  gsap.to('.main-screen__text', {
    y: 0,
    opacity: 1,
    duration: .5,
    delay: .1,
  });
}

export const threeAnimation = () => {
  const block = document.querySelectorAll('.block');

  block.forEach(item => {
    const title = item.querySelector('.block__title')
    const desc = item.querySelector('.block__desc')
    const img = item.querySelector('.block__img')
    const icon = item.querySelectorAll('.block-icon__item')
    const appIcon = item.querySelectorAll('.block__content-icon-item')

    if (title) {
      gsap.to(title, {
        y: 0,
        opacity: 1,
        duration: .5,
        delay: .1
      });
    }
    if (desc) {
      gsap.to(desc, {
        y: 0,
        opacity: 1,
        duration: .5,
        delay: .2
      });
    }
    if (img) {
      gsap.to(img, {

        y: 0,
        opacity: 1,
        duration: .5,
        delay: .3
      });
    }
    if (icon) {
      let time = 0.1;
      icon.forEach(itemIcon => {
        gsap.to(itemIcon, {
          y: 0,
          opacity: 1,
          delay: time
        });
        time += 0.05
      })
    }
    if (appIcon) {
      let time = 0.1;
      appIcon.forEach(itemIcon => {
        gsap.to(itemIcon, {
          y: 0,
          opacity: 1,
          delay: time
        });
        time += 0.1
      })
    }
  })
}

export const AnimationAboutScreen = (screen) => {

  if (screen === 1) {
    firstAnimation();
    setTimeout(() => {
      gsap.to('.main-screen__video-one', {opacity: 1, duration: .5});
    }, 800);
    gsap.to('.main-screen__video-two', {opacity: 0, duration: .5});
  }

  if (screen === 2) {
    setTimeout(() => {
      twoAnimation();
    }, 800);
    headerRemoveWhite();
    gsap.to('.main-screen__video-one', {opacity: 0, duration: .5});
    setTimeout(() => {
      gsap.to('.main-screen__video-two', {opacity: 1, duration: .5});
    }, 800);
  }

  if (screen === 3) {
    gsap.to('.main-screen__video-two', {opacity: 0, duration: .5});
    setTimeout(() => {
      threeAnimation();
    }, 600);
    setTimeout(() => {
      headerWhite();
    }, 600);
  }
}