import { useRef, useState } from "react";

import bgShadow from "&/images/global/card-shadow.svg";
import videoThumb from "&/images/global/header.png";
import playIcon from "&/images/icons/bouton play.svg";

export default function VideoFrame() {
  const [playing, setPlaying] = useState(false);
  const ref = useRef<HTMLVideoElement>(null);

  const start = (): void => {
    setPlaying(true);
    requestAnimationFrame(() => {
      void ref.current?.play();
    });
  };

  const videoSrc = "/storage/videos/motion.mp4";

  return (
    <div className="relative z-10 mx-auto w-full max-w-full sm:w-[1020px]">
      <div className="relative aspect-video overflow-hidden bg-black">
        {playing ? (
          <video
            ref={ref}
            src={videoSrc}
            className="h-full w-full object-cover"
            controls
            playsInline
            preload="none"
          >
            <track kind="captions"></track>
          </video>
        ) : (
          <button
            type="button"
            onClick={start}
            aria-label="Lire la vidéo"
            className="group flex h-full w-full items-center justify-center"
          >
            {/* thumbnail */}
            <img
              src={videoThumb}
              alt="Vidéo présentant les valeurs de Ker Chant"
              title="Découvrir ker Chant en vidéo"
              className="absolute inset-0 h-[127%] w-full object-cover"
            />
            {/* icône play */}
            <img
              src={playIcon}
              alt="Play"
              className="relative w-20 transition-transform group-hover:scale-110 sm:w-28"
            />
          </button>
        )}
      </div>

      <img
        src={bgShadow}
        alt=""
        aria-hidden="true"
        className="pointer-events-none absolute bottom-0 left-0 -z-10 w-full max-w-none sm:translate-y-5 translate-y-3"
      />
    </div>
  );
}