import { useEffect, useRef } from 'react';
import { CloseIcon } from '../../components/icons/CloseIcon';
import { useModalStore } from '../../store/modalStore';

interface VideoModalProps {
  link: string;
  currentTime: number;
}

export function VideoModal({ link, currentTime }: VideoModalProps) {
  const { setModal } = useModalStore();

  const handleOnCloseClick = () => {
    setModal(null);
  };

  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (!videoRef.current) return;
    videoRef.current.currentTime = currentTime;
  }, [currentTime, videoRef]);

  return (
    <div className="w-screen h-screen absolute z-[110] top-0 left-0 overflow-hidden flex justify-center items-center">
      <div className="aspect-video flex justify-center items-center w-full">
        <button
          className="p-4 rounded-full border absolute top-4 right-4 z-[100] cursor-pointer"
          onClick={handleOnCloseClick}
        >
          <div className="size-10">
            <CloseIcon />
          </div>
        </button>
        <video
          src={link}
          ref={videoRef}
          className="h-full"
          autoPlay
          muted
          loop
          playsInline
        />
      </div>
    </div>
  );
}
