import { useEffect, useRef } from 'react';
import { Fullscreen } from '../icons/Fullscreen';
import { useModalStore } from '../../store/modalStore';
import { VideoModal } from '../Layouts/VideoModal';

export function Showreel() {
  const setModal = useModalStore(state => state.setModal);

  useEffect(() => {
    const listener = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setModal(null);
    };
    document.addEventListener('keydown', listener);

    return () => document.removeEventListener('keydown', listener);
  }, [setModal]);

  const videoRef = useRef<HTMLVideoElement>(null);

  return (
    <div className="lg:mb-[100px] sm:mb-[70px] mb-14 w-full relative flex justify-center items-center group">
      <video
        src="/video/showreel.mp4"
        ref={videoRef}
        autoPlay
        loop
        muted
        playsInline
        className="self-stretch object-cover w-full"
      />
      <button
        className="absolute z-10 lg:p-8 sm:p-6 p-4 rounded-full border group-hover:block hidden bg-[#14161F33]"
        onClick={() => {
          setModal(
            <VideoModal
              currentTime={videoRef.current?.currentTime ?? 0}
              link={'/video/showreel.mp4'}
            />,
          );
        }}
      >
        <Fullscreen />
      </button>
    </div>
  );
}
