'use client'
import { Contact, Image } from "@/generated/types";
import { useEffect, useState } from "react";
const mobileUrl = "/assets/static/images/slide-mobile-light.png"; 

type BackProps = {
    data: Image[];
};

type BackLayout = {
    params: BackProps;
    children: React.ReactNode;
};

export function BackGround({ params: { data }, children }: BackLayout) {
  const [bgImage, setBgImage] = useState("");
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    setBgImage(window?.innerWidth <= 500 ? mobileUrl : data[0]?.url);
    const interval = setInterval(() => {
      setActiveIndex((prevIndex) => (prevIndex + 1) % data.length);
    }, 5000);

    return () => {
      clearInterval(interval);
    };
  }, [data]);

  useEffect(() => {
    setBgImage(window?.innerWidth <= 500 ? mobileUrl : data[activeIndex]?.url);
  }, [activeIndex]);


  function setBgImagePage(value: string) {
    setBgImage(value);
  }

  return (
    <div
      style={{
        position: "relative",
        zIndex: 1,
        display: "flex",
        WebkitBoxPack: "center",
        WebkitJustifyContent: "center",
        justifyContent: "center",
        WebkitBoxAlign: "center",
        WebkitAlignItems: "center",
        alignItems: "center",
        width: "100%",
        height: "100vh",
        backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${bgImage}')`,
        backgroundPosition: "0px 0px, 50% 50%",
        backgroundSize: "auto, cover",
      }}
    >
      <div className="absolute  hidden lg:block  top-20 right-0 w-14 grid" style={{top: '50%'}}>
        {data?.length > 0 &&
          data?.map((res: Image, index: number) => {
            const isLastIndex = index === data.length - 1;
            return (
              <div
                key={index}
                onClick={() => {
                    setBgImagePage(res.url)
                    setActiveIndex(index)
                }}
                className={`cursor-pointer hover:bg-blue-300 mx-2 hover:mx-1.5 hover:w-4 hover:h-4 focus:w-3 focus:h-4 rounded-full mb-3 ${
                    activeIndex === index ? "bg-blue-300 w-4 h-4" : "bg-white w-3 h-3 ml-2.5"
                  }`}
              />
            );
          })}
      </div>
      
      {children}
    </div>
  );
}

export default BackGround;