// This component is what gives the main hero the title and it's subtitle
// should receive props form the API 
import { useEffect, useRef } from 'react'
import Head from 'next/head'
import styles from './herotext.module.css'
import Image from 'next/image'

import gsap from 'gsap';
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";


function ImageHero({image, isActive}){
  if (isActive){
    return <div className={styles.imagehero} data-scroll><Image src={image} alt='Sculpture Creative' width={500} height={500} /></div>
  }
  return <div></div>
}


export default function HeroText(props) {
  let imagesFeature = props.imageSrc;
  useEffect(() => {
    // Get the container element and the image elements
    const container = document.getElementById("container"); 
    const images = container!.getElementsByTagName("div");

    // Set the initial position of the images
    for (let i = 0; i < images.length; i++) {
      images[i].style.position = "absolute";
      images[i].style.opacity = "0";
    }

    // Create a ScrollTrigger for image 1
    gsap.registerPlugin(ScrollTrigger);
    ScrollTrigger.create({
      trigger: images[0].parentElement?.parentElement?.parentElement,
      start: "-1",
      end: "60px",
      onEnter: () => {
        gsap.to(images[0], { opacity: 1, duration: 0.3 });
      },
      onLeaveBack: () => {
        gsap.to(images[0], { opacity: 0, duration: 0.3 });
      }
    });

    // Create a ScrollTrigger for image 2
    ScrollTrigger.create({
      trigger: images[1].parentElement?.parentElement,
      start: "61px",
      end: "110px",
      onEnter: () => {
        gsap.to(images[1], { opacity: 1, duration: 0.3 });
      },
      onLeaveBack: () => {
        gsap.to(images[1], { opacity: 0, duration: 0.3 });
      }
    });

    // Create a ScrollTrigger for image 3
    ScrollTrigger.create({
      trigger: images[2].parentElement?.parentElement,
      start: "111px",
      end: "210px",
      onEnter: () => {
        gsap.to(images[2], { opacity: 1, duration: 0.3 });
      },
      onLeaveBack: () => {
        gsap.to(images[2], { opacity: 0, duration: 0.3 });
      }
    });

    // Create a ScrollTrigger for image 4
    ScrollTrigger.create({
      trigger: images[3].parentElement?.parentElement,
      start: "211px",
      end: "320px",
      onEnter: () => {
        gsap.to(images[3], { opacity: 1, duration: 0.3 });
      },
      onLeaveBack: () => {
        gsap.to(images[3], { opacity: 0, duration: 0.3 });
      }
    });
  }, []);
  

  const urlBase = process.env.NEXT_PUBLIC_BASE_URL
  return (
    <>
      <section className={styles.hero_sec}>
          <div className={styles.mainarea}  >
              <div className={styles.title} >
                  <h1>{props.title}</h1>
              </div>
              <div className={styles.maindesc} >
                  <p>{props.maindesc}</p>
              </div>
          </div>
          <div className={styles.areaImages} id='container'>
            {imagesFeature?.map((item, index)=>{
              return <ImageHero key={index} image={`${urlBase}${item.attributes.formats.medium.url}`} isActive={props.active} />
            })}
          </div>
      </section>
    </>
  )
}