"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import { createPortal } from "react-dom";
import Image from "next/image";

const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });

interface VideoModalProps {
  videoSrc: string;
  videoIcon: string;
  iconAlt?: string;
}

export default function VideoModal({
  videoSrc,
  videoIcon,
  iconAlt = "Play video",
}: VideoModalProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const canUseDOM = typeof window !== "undefined";

  const handleOpen = (e: React.MouseEvent) => {
    e.preventDefault();
    setIsOpen(true);
    requestAnimationFrame(() => setIsPlaying(true));
  };

  const handleClose = () => {
    setIsPlaying(false);
    setTimeout(() => setIsOpen(false), 120);
  };

  return (
    <>
      <a href="#" title="" className="video-btn" onClick={handleOpen}>
        <Image src={videoIcon} alt={iconAlt} width={30} height={30} />
      </a>
      {canUseDOM &&
        isOpen &&
        createPortal(
          <div className="video-modal-backdrop" onClick={handleClose}>
            <div
              className="video-modal-inner"
              onClick={(e) => e.stopPropagation()}
            >
              <button
                className="video-modal-close"
                onClick={handleClose}
                aria-label="Close video"
              >
                &#x2715;
              </button>
              <ReactPlayer
                src={videoSrc}
                width="100%"
                height="100%"
                playing={isPlaying}
                controls
              />
            </div>
          </div>,
          document.body,
        )}
    </>
  );
}