import { useEffect, type Dispatch, type SetStateAction } from "react";
import type { VideoMetadata } from "../../utils/types.ts";

type Props = {
    videoRef: HTMLVideoElement | null;
    videoMetadata: VideoMetadata;
    sliderValue: number;
    setSliderValue: Dispatch<SetStateAction<number>>;
    className?: string;
};

export default function PlaybackSlider({ videoRef, videoMetadata, sliderValue, setSliderValue, className }: Props) {
    const updateVideo = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (!videoRef) return;
        videoRef.currentTime = e.target.valueAsNumber;
        setSliderValue(e.target.valueAsNumber);
    };

    useEffect(() => {
        if (!videoRef) return;
        const updateSlider = () => setSliderValue(videoRef.currentTime);
        videoRef.addEventListener("timeupdate", updateSlider);
        return () => videoRef.removeEventListener("timeupdate", updateSlider);
    }, [videoRef]);

    return (
        <input
            type="range"
            min={0}
            max={videoMetadata.duration}
            value={sliderValue}
            onChange={updateVideo}
            step={0.1}
            className={className}
        />
    );
}