import React, { createContext, ReactNode, useRef, useState } from "react";
import { PlaybackSpeed } from "./type";
import VideoPlayerLayout from "./VideoPlayerLayout";

interface VideoPlayerContextType {
	src: string;
	poster?: string;
	onError?: (error: string) => void;
	showControls: boolean;
	setShowControls: React.Dispatch<React.SetStateAction<boolean>>;
	isSettingsOpen: boolean;
	setIsSettingsOpen: React.Dispatch<React.SetStateAction<boolean>>;
	playbackSpeed: PlaybackSpeed;
	setPlaybackSpeed: React.Dispatch<React.SetStateAction<PlaybackSpeed>>;
	videoRef: React.RefObject<HTMLVideoElement>;
	isReady: boolean;
	setIsReady: React.Dispatch<React.SetStateAction<boolean>>;
	isPlaying: boolean;
	setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
	error: string | null;
	setError: React.Dispatch<React.SetStateAction<string | null>>;
	bufferingState: boolean;
	setBufferingState: React.Dispatch<React.SetStateAction<boolean>>;
	volume: number;
	setVolume: React.Dispatch<React.SetStateAction<number>>;
	isMuted: boolean;
	setIsMuted: React.Dispatch<React.SetStateAction<boolean>>;
	loadingProgress: number;
	setLoadingProgress: React.Dispatch<React.SetStateAction<number>>;
	currentTime: number;
	setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
	duration: number;
	setDuration: React.Dispatch<React.SetStateAction<number>>;
	brightness: number;
	setBrightness: React.Dispatch<React.SetStateAction<number>>;
	isDragging: boolean;
	setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
	isHovering: boolean;
	setIsHovering: React.Dispatch<React.SetStateAction<boolean>>;
	progressRef: React.RefObject<HTMLDivElement>;
}
export const VideoPlayerContext = createContext<VideoPlayerContextType | null>(
	null
);
export function VideoPlayer({
	src,
	poster,
	onError,
}: {
	src: string;
	poster?: string;
	onError?: (error: string) => void;
}) {
	const [showControls, setShowControls] = useState(false);
	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
	const [playbackSpeed, setPlaybackSpeed] = useState<PlaybackSpeed>(1.0);

	const videoRef = useRef<HTMLVideoElement>(null);
	const [isReady, setIsReady] = useState(false);
	const [isPlaying, setIsPlaying] = useState(false);
	const [error, setError] = useState<string | null>(null);
	const [bufferingState, setBufferingState] = useState(false);
	const [volume, setVolume] = useState(1);
	const [isMuted, setIsMuted] = useState(false);
	const [loadingProgress, setLoadingProgress] = useState(0);
	const [currentTime, setCurrentTime] = useState(0);
	const [duration, setDuration] = useState(0);
	const [brightness, setBrightness] = useState(1);
	const [isDragging, setIsDragging] = useState(false);
	const [isHovering, setIsHovering] = useState(false);
	const progressRef = useRef<HTMLDivElement>(null);

	return (
		<VideoPlayerContext.Provider
			value={{
				src,
				poster,
				onError,
				showControls,
				setShowControls,
				isSettingsOpen,
				setIsSettingsOpen,
				playbackSpeed,
				setPlaybackSpeed,
				videoRef,
				isReady,
				setIsReady,
				isPlaying,
				setIsPlaying,
				error,
				setError,
				bufferingState,
				setBufferingState,
				volume,
				setVolume,
				isMuted,
				setIsMuted,
				loadingProgress,
				setLoadingProgress,
				currentTime,
				setCurrentTime,
				duration,
				setDuration,
				brightness,
				setBrightness,
				isDragging,
				setIsDragging,
				isHovering,
				setIsHovering,
				progressRef,
			}}>
			<VideoPlayerLayout></VideoPlayerLayout>
		</VideoPlayerContext.Provider>
	);
}