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

gsap.registerPlugin(ScrollTrigger, Power2);

export const AnimationPartnership = () => {
  gsap.to(".partnership-welcome__bg", {scale: 1, duration: .9, ease: Power2.easeOut});
  gsap.to(".partnership-welcome__parallax-1", {y: -0, duration: .9, ease: Power2.easeOut});
  gsap.to(".partnership-welcome__parallax-2", {y: -0, duration: .9, ease: Power2.easeOut});
  gsap.to(".partnership-welcome__block-first", {y: 0, opacity: 1, duration: .7, delay: .3, ease: Power2.easeOut});
  gsap.to(".partnership-welcome__text", {y: 0, opacity: 1, duration: .7, delay: .45, ease: Power2.easeOut});

  let fog1 = document.querySelector('.partnership-welcome__parallax-1');
  let fog2 = document.querySelector('.partnership-welcome__parallax-2');
  window.addEventListener('mousemove', (e) => {
    let x = e.clientX / window.innerWidth;
    let y = e.clientY / window.innerHeight;
    fog1.style.transform = 'translate(-' + x * 10 + 'px, -' + y * 10 + 'px)';
    fog2.style.transform = 'translate(-' + x * 30 + 'px, -' + y * 30 + 'px)';
  });
}

export const AnimationPartnershipTwo = () => {
  gsap.to(".partnership-welcome__parallax-1", {y: -50, duration: 1, ease: Power2.easeOut});
  gsap.to(".partnership-welcome__parallax-2", {y: -100, duration: 1, ease: Power2.easeOut});
  gsap.to(".partnership-welcome__block-first", {y: -20, opacity: 0, duration: .4, ease: Power2.easeOut});
  gsap.to(".partnership-welcome__text", {y: -20, opacity: 0, duration: .4, ease: Power2.easeOut});
}

export const AnimationPartnershipScreen = (screen) => {
  if (screen === 1) {
    AnimationPartnership();

    setTimeout(() => {
      headerRemoveWhite();
    }, 0);
  }

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

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