import { useEffect, useRef, useContext } from "react";
import gsap from "gsap";
import { SliderContext } from "../Context";

const FirstSlide = () => {
  const firstImageRef = useRef(null);
  const secondImageRef = useRef(null);
  const currentContext = useContext(SliderContext);

  useEffect(() => {
    if (!firstImageRef.current || !secondImageRef.current) return;

    if (currentContext === 1) {
      gsap.fromTo(
        firstImageRef.current,
        { transform: "scale(2.0)" },
        {
          transform: "scale(1.6)",
          duration: 1.5,
          scrollTrigger: {
            trigger: firstImageRef.current,
            start: "10% bottom",
          },
        }
      );
      gsap.fromTo(
        secondImageRef.current,
        { transform: "scale(2.0)", left: "5%", top: "25%" },
        {
          transform: "scale(1.5)",
          left: "-0%",
          top: "30%",
          duration: 2.2,
          scrollTrigger: {
            trigger: firstImageRef.current,
            start: "10% bottom",
          },
        }
      );
    }
  }, [currentContext]);

  return (
    <div className="flex flex-col justify-center align-middle min-w-[100vw] max-w-[100vw]">
      <p className="font-bold text-8xl text-wrap text-white mx-auto leading-[110px]">
        Технологии расширенной
        <br /> реальности для вашего бизнеса
      </p>
      <img
        ref={firstImageRef}
        className="absolute top-[30%] scale-150 left-[6%]"
        src="/images/slides/first-slide-2.png"
        alt="image"
      />
      <img
        ref={secondImageRef}
        className="absolute top-[30%] scale-150 left-[20%]"
        src="/images/slides/first-slide-1.png"
        alt="image"
      />
      <p className="absolute text-white text-4xl top-[85%] left-[62%]">
        Мы приглашаем вас в мир
        <br /> удивительного будущего с<br /> технологиями виртуальной <br /> и
        смешанной реальности
      </p>
    </div>
  );
};

export default FirstSlide;
