"use client"
import { useEffect, useState, useRef } from "react"
import { CldVideoPlayer } from 'next-cloudinary';
import 'next-cloudinary/dist/cld-video-player.css';

const HeroSection = () => {
  const [viewPortWidth, setViewPortWidth] = useState<number>(0)
  const [viewPortHeight, setViewPortHeight] = useState<number>(0)
  const videoReff = useRef<HTMLVideoElement | null>(null);

  useEffect(() => {
    const updateViewPortDimensions = () => {
      setViewPortWidth(window.innerWidth)
      setViewPortHeight(window.innerHeight)
    }

    updateViewPortDimensions()
    window.addEventListener("resize", updateViewPortDimensions)
    
    return () => {
      window.removeEventListener("resize", updateViewPortDimensions)
    }
  }, [])

  const checkViewPortDims = () => {
    console.log(viewPortWidth, viewPortHeight)
  }

  return (
    <div className="w-full h-screen">
      <div className="w-screen h-screen absolute top-0 -z-10">
        {viewPortWidth > 0 && viewPortHeight > 0 && (
          <CldVideoPlayer
            src="zd5a7igyeznn470rx5tl"
            width={viewPortWidth}
            height={viewPortHeight}
            videoRef={videoReff}
            muted={true}
            playsinline={true}
            autoplay={true}
            loop={true}
            controls={false}
            transformation={{
              width: viewPortWidth,
              height: viewPortHeight,
              crop: 'fill',
            }}
          />
        )}
      </div>

      <div className="w-full h-full bg-black bg-opacity-70 pt-20 px-6 sm:px-10 md:px-20 lg:px-32 flex flex-col justify-between items-center pb-20 z-20">
        <p className="font-light text-white300 leading-tight text-center mt-16 md:mt-24 lg:mt-32 max-w-[90%] md:max-w-4xl lg:max-w-5xl xl:max-w-6xl text-[clamp(1.5rem,4vw,3.5rem)] z-10">
          From our atelier in Nairobi, Kenya, Deeba crafts globally resonant spaces for discerning residential, hospitality, and leisure clients. 
          We <span className="text-white300 underline hover:text-deeba-main cursor-pointer" onClick={checkViewPortDims}>invite you</span> to explore the possibilities of a collaborative design journey.
        </p>

        <div className="relative w-[50px] h-[100px] overflow-hidden mb-10 mt-10">
          <div className="absolute bg-greylite opacity-40 left-1/2 w-[1.5px] h-[99%]"></div>
          <div className="absolute bg-greylite opacity-40 bottom-0 w-full h-[1.5px]"></div>
          <div className="absolute w-[1.5px] h-0 bg-deeba-mustard top-0 left-1/2 animate-t-line"></div>
          <div className="absolute h-[1.5px] w-0 bg-deeba-mustard bottom-0 -translate-x-1/2 left-1/2 animate-b-line"></div>
        </div>
      </div>
    </div>
  )
}

export default HeroSection;