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

gsap.registerPlugin(ScrollTrigger, Power2);
const main = document.querySelector('.js-main-animation');

window.addEventListener('load', () => {
  if (main) {
    gsap.to(".welcome__title", {y: 0, opacity: 1, delay: .2});
    gsap.to(".welcome__text", {y: 0, opacity: 1, delay: .4});
    mahjongFirstPosition();
  }
});

export const mahjongFirstPosition = () => {
  gsap.to(".animation_qcm", {y: -60, duration: 1.5});
  // gsap.to(".animation_ex", {y: -20, duration: 1.5});
  gsap.to(".animation_amaiz", {y: -60, duration: 1.5});
  gsap.to(".animation_qcex", {y: -60, duration: 1.5});
  gsap.to(".animation_iq", {y: -60, duration: 1.5});
  // gsap.to(".animation_westive", {y: -20, duration: 1.5});
}

export const mahjongFirstPositionTwo = () => {
  gsap.to(".animation_qcm", {y: -60, duration: .6, delay: .3, ease: Power2.easeOut});
  // gsap.to(".animation_ex", {y: -20, duration: .6, delay: .3, ease: Power2.easeOut});
  gsap.to(".animation_amaiz", {y: -60, duration: .6, delay: .3, ease: Power2.easeOut});
  gsap.to(".animation_qcex", {y: -60, duration: .6, delay: .3, ease: Power2.easeOut});
  gsap.to(".animation_iq", {y: -60, duration: .6, delay: .3, ease: Power2.easeOut});
  // gsap.to(".animation_westive", {y: -20, duration: .6, delay: .3, ease: Power2.easeOut});
}

export const animationPortfolio = () => {
  const gridItem = document.querySelectorAll('.grid__item');
  const element = document.querySelectorAll('.portfolio');
  const trigger = document.querySelector('.scroll-page__section-2')

  const visible = (target) => {
    const targetPosition = {
      top: window.pageYOffset + target.getBoundingClientRect().top,
      bottom: window.pageYOffset + target.getBoundingClientRect().bottom
    };

    const windowPosition = {
      top: window.pageYOffset,
      bottom: window.pageYOffset + document.documentElement.clientHeight
    };

    if (targetPosition.bottom > windowPosition.top - 400 && targetPosition.top < windowPosition.bottom - 400) {
      headerWhite();
      setTimeout(() => {
        let time = 0.1;
        gridItem.forEach((item) => {
          time += 0.05
          gsap.to(item, {
            y: 0,
            delay: time,
            duration: .25,
            opacity: 1,
            ease: Power2.easeOut
          })
        })
      }, 375);

      gsap.to(".portfolio__title", {
        y: 0,
        opacity: 1,
        duration: .25,
        delay: .25,
        ease: Power2.easeOut
      });
      gsap.to(".portfolio__description", {
        y: 0,
        opacity: 1,
        duration: .25,
        delay: .35,
        ease: Power2.easeOut
      });
    }

    if (targetPosition.top > windowPosition.bottom - 400) {
      headerRemoveWhite();
    }
  };

  element.forEach((item) => {
    trigger.addEventListener('scroll', () => {
      visible(item);
    });

    visible(item);
  });
}

export const animationPortfolioMobile = () => {
  setTimeout(() => {
    let time = 0.1;
    const gridItem = document.querySelectorAll('.grid__item');
    setTimeout(() => {
      gridItem.forEach(item => {
        gsap.to(item, {
          scrollTrigger: '.grid',
          y: 0,
          delay: time,
          duration: .25,
          opacity: 1,
          ease: Power2.easeOut
        })
        time += 0.05
      });
    }, 400);

    gsap.to(".portfolio__title", {
      scrollTrigger: '.portfolio__title',
      y: 0,
      opacity: 1,
      duration: .25,
      delay: .25,
      ease: Power2.easeOut
    });
    gsap.to(".portfolio__description", {
      scrollTrigger: '.portfolio__description',
      y: 0,
      opacity: 1,
      duration: .25,
      delay: .35,
      ease: Power2.easeOut
    });
  }, 500)
}

export const mahjongAnimationDesktop = () => {
  gsap.to('.animation_qcm', {
    duration: .5,
    y: -800,
    ease: Power2.easeOut
  });
  gsap.to('.animation_amaiz', {
    duration: .5,
    y: -1100,
    ease: Power2.easeOut
  });
  gsap.to('.animation_qcex', {
    duration: .5,
    y: -1000,
    ease: Power2.easeOut
  });
  gsap.to('.animation_iq', {
    duration: .5,
    y: -700,
    ease: Power2.easeOut
  });
  // gsap.to('.animation_ex', {
  //   duration: 1,
  //   y: -700,
  //   ease: Power2.easeOut
  // });
  // gsap.to('.animation_westive', {
  //   duration: .5,
  //   y: -500,
  //   ease: Power2.easeOut
  // });
}

export const mahjongAnimationMobile = () => {

  const animation = gsap.timeline({
    scrollTrigger: {
      trigger: ".welcome",
      start: "top top",
      end: "+=720",
      scrub: 1,
      toggleActions: 'reverse',
    }
  });

  animation.to(".animation_qcm", {
    y: -400,
    transition: 1
  }, 0);
  animation.to(".animation_amaiz", {
    y: -400,
    transition: 1
  }, 0);
  // animation.to(".animation_ex", {
  //   y: -800,
  //   transition: 1
  // }, 0);
  animation.to(".animation_qcex", {
    y: -600,
    transition: 1
  }, 0);
  animation.to(".animation_iq", {
    y: -600,
    transition: 1
  }, 0);
  // animation.to(".animation_westive", {
  //   y: -400,
  //   transition: 1
  // }, 0);
}

export const animationPaginationMobile = () => {
  const paginationItem = document.querySelectorAll('.pagination__item');
  let timeP = 0.1;
  paginationItem.forEach(item => {
    gsap.to(item, {
      scrollTrigger: '.pagination',
      y: 0,
      delay: timeP,
      opacity: 1
    })
    timeP += 0.1
  })

  gsap.to('.slide-info__content', {
    scrollTrigger: '.pagination',
    opacity: 1,
    x: 0
  })
}

const animationPagination = () => {
  const paginationItem = document.querySelectorAll('.pagination__item');
  let timeP = 0.1;
  paginationItem.forEach(item => {
    gsap.to(item, {
      y: 0,
      delay: timeP,
      opacity: 1
    })
    timeP += 0.1
  })

  gsap.to('.slide-info__content', {
    opacity: 1,
    x: 0
  })
}

export const AnimationMainScreen = (screen) => {

  if (screen === 1) {
    mahjongFirstPositionTwo();
  }

  if (screen === 2) {
    mahjongAnimationDesktop();

    setTimeout(() => {
      animationPagination();
    }, 600);
  }
}