import { IProps } from "@/common/Iprops.interface";
import blue from "@/assets/img/bluebg.png";
import cyan from "@/assets/img/cyanbg.png";
import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";

import {gsap} from 'gsap'
interface BgLay {
  size: [string,string];
  align?: string;
  position: string[];
  rotation?: string;
  zIndex: string;
  color: string;
  blur?: string;
  opacity?: string;
}
interface BgAnimeType extends IProps {
  animation?: string;
  config: BgLay[];
}
interface BgElement extends IProps {
  config: BgLay;
}

const BgImgHodler = (props:BgElement)=>{
    const { zIndex, color, size, position,rotation,blur,opacity } = props.config;
    const align = props.config.align ? props.config.align : "left";
    
    const getPosition = useMemo(() => {
        if (align === "left") {
          return {
            width: size[0],
            height:size[1],
            top: position[1],
            left: position[0],
            right: "",
            zIndex: zIndex,
            transform:rotation&&`rotate(${rotation}deg)`,
            filter:`blur(${blur?blur:'0px'}) opacity(${opacity?opacity:"100%"})`
          };
        } else {
          return {
            width: size[0],
            height:size[1],
            top: position[1],
            right: position[0],
            left: "",
            zIndex: zIndex,
            transform:rotation&&`rotate(${rotation}deg)`,
            filter:`blur(${blur?blur:'0px'}) opacity(${opacity?opacity:"100%"})`
          };
        }
      }, [zIndex, color, size, position,rotation,blur,opacity ]);

    return(
        <div>
            <img
                src={color === "blue" ? blue : cyan}
                className={`img-holder
                    object-cover
                    absolute
                    `}
                style={getPosition}
            />
        </div>
    )
}

export const GradientLay = (props: BgAnimeType) => {
  const { children } = props;
  return (
    <div className=" relative h-full w-full min-w-[1440px] overflow-hidden">
        <div className="w-full h-full absolute top-0 left-0  z-[-999] ">
            {props&&props.config && props.config.length > 0
                    ? props.config.map((i,index) => {
                        return <BgImgHodler key={index} config={i}></BgImgHodler>;
                    })
            : ""} 
        </div>
        <div className="content-holder w-full h-full">{children}</div>
    </div>
  );
};
