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

gsap.registerPlugin(ScrollTrigger, Power4);

const letter = document.querySelectorAll('.main-screen__title-letter');

export const AnimationSustainability = () => {
  window.scrollTo(0, 0);
  gsap.to(".main-screen__desc", {y: 0, duration: 1, opacity: 1, delay: .2});
  Array.from(letter).forEach((el) => {
    gsap.to(el, {
      opacity: 1,
      duration: 1,
      y: 0,
      delay: 0.1,
    });
  });

  const video = document.querySelector('.main-screen__video--desc');
  const bg = document.querySelector('.main-screen__background');
  const btnArrow = document.querySelector('.btn-arrow__item_bottom');
  const breakpoint = window.matchMedia('(min-width: 1200px)');

  swiperResponsibility.init();
  swiperResponsibility.autoplay.start();

  if (!btnArrow) return false;

  if (breakpoint.matches) {
    btnArrow.addEventListener('click', () => {
      window.scrollTo(0, video.scrollHeight);
    });
  } else {
    btnArrow.addEventListener('click', () => {
      window.scrollTo(0, bg.scrollHeight);
    });
  }
}

export const AnimationSustainabilityScreen = (screen) => {

  if (screen === 1) {
    setTimeout(() => {
      headerRemoveWhite();
    }, 0);

    gsap.to(".main-screen__desc", {y: 0, duration: 1, opacity: 1});
    gsap.to(".main-screen__title", {y: 0, duration: .5, opacity: 1});
  }

  if (screen === 2) {
    setTimeout(() => {
      headerWhite();
    }, 600);

    gsap.to(".main-screen__desc", {y: -40, duration: .5, opacity: 0});
    gsap.to(".main-screen__title", {y: -40, duration: .5, opacity: 0});
  }
}