import { useEffect, useRef } from 'react';
import { getVideoPreviewUrl } from './utils';
import type { MediaItem } from './types';

type VideoThumbPreviewProps = {
	item: MediaItem;
	fallbackImage?: string;
	durationLabel: string;
	isActive: boolean;
};

export function VideoThumbPreview( {
	item,
	fallbackImage,
	durationLabel,
	isActive,
}: VideoThumbPreviewProps ) {
	const videoRef = useRef<HTMLVideoElement>( null );
	const previewUrl = getVideoPreviewUrl( item.sources );
	const showPreview = isActive && !! previewUrl;

	useEffect( () => {
		const video = videoRef.current;
		if ( ! video || ! showPreview ) {
			return;
		}

		video.load();
		video.play().catch( () => undefined );
	}, [ showPreview, previewUrl ] );

	if ( showPreview ) {
		return (
			<>
				<video
					ref={ videoRef }
					className="voltax-media-preview"
					controls
					playsInline
					muted
					preload="metadata"
					poster={ fallbackImage }
					onClick={ ( event ) => event.stopPropagation() }
					onPointerDown={ ( event ) => event.stopPropagation() }
				>
					<source src={ previewUrl } />
				</video>
				{ durationLabel ? <span className="voltax-media-duration">{ durationLabel }</span> : null }
			</>
		);
	}

	return (
		<>
			{ fallbackImage ? <img src={ fallbackImage } alt="" /> : null }
			{ durationLabel ? <span className="voltax-media-duration">{ durationLabel }</span> : null }
		</>
	);
}