import { jsx, jsxs } from 'react/jsx-runtime';
import { useRef, useState, useEffect, useCallback } from 'react';
import Icon from '../Icon/Icon.js';
import OverviewModal from '../OverviewModal/overviewModal.js';
import Typography from '../Typography/Typography.js';
import Tooltip from '../Tooltip/Tooltip.js';

const MediaViewerModal = ({ isOpen, onClose, isPlaying, onTogglePlay, mediaType, src, headerTitle, onDownload, onExpand, showHeader = true, showDownload = true, showExpand = true, width = '800px', height = '432px', showControls = true, customStyle, overlay = true, children, showControlDownload = false, showControlExpand = false, isFullscreen = false, }) => {
    const videoRef = useRef(null);
    const sliderRef = useRef(null);
    const [currentTime, setCurrentTime] = useState(0);
    const [duration, setDuration] = useState(0);
    const [isDragging, setIsDragging] = useState(false);
    const [progress, setProgress] = useState(0);
    useEffect(() => {
        if (mediaType === 'video' && videoRef.current && !children) {
            isPlaying ? videoRef.current.play() : videoRef.current.pause();
        }
    }, [isPlaying, mediaType, children]);
    const handleTimeUpdate = useCallback(() => {
        if (videoRef.current && !isDragging) {
            const current = (videoRef.current.currentTime / videoRef.current.duration) * 100;
            setProgress(current || 0);
            setCurrentTime(videoRef.current.currentTime);
        }
    }, [isDragging]);
    const handleLoadedMetadata = useCallback(() => {
        if (videoRef.current) {
            setDuration(videoRef.current.duration);
        }
    }, []);
    const handleVideoEnd = useCallback(() => {
        setCurrentTime(0);
        setProgress(0);
        onTogglePlay?.();
    }, [onTogglePlay]);
    const formatTime = useCallback((time) => {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60)
            .toString()
            .padStart(2, '0');
        return `${minutes}:${seconds}`;
    }, []);
    const handleSeek = useCallback((newProgress) => {
        if (videoRef.current) {
            const seekTo = (newProgress / 100) * videoRef.current.duration;
            videoRef.current.currentTime = seekTo;
            setProgress(newProgress);
            setCurrentTime(seekTo);
        }
    }, []);
    const handleSliderClick = useCallback((e) => {
        if (isDragging || !sliderRef.current)
            return;
        const rect = sliderRef.current.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const width = rect.width;
        const newProgress = Math.max(0, Math.min(100, (clickX / width) * 100));
        handleSeek(newProgress);
    }, [handleSeek, isDragging]);
    const handleMouseDown = useCallback((e) => {
        if (!sliderRef.current)
            return;
        setIsDragging(true);
        const rect = sliderRef.current.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const width = rect.width;
        const newProgress = Math.max(0, Math.min(100, (clickX / width) * 100));
        handleSeek(newProgress);
    }, [handleSeek]);
    const handleMouseMove = useCallback((e) => {
        if (!isDragging || !sliderRef.current || !videoRef.current)
            return;
        const rect = sliderRef.current.getBoundingClientRect();
        const moveX = e.clientX - rect.left;
        const width = rect.width;
        const newProgress = Math.max(0, Math.min(100, (moveX / width) * 100));
        handleSeek(newProgress);
    }, [isDragging, handleSeek]);
    const handleMouseUp = useCallback(() => {
        setIsDragging(false);
    }, []);
    useEffect(() => {
        if (isDragging) {
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
            return () => {
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            };
        }
        return undefined;
    }, [isDragging, handleMouseMove, handleMouseUp]);
    if (!isOpen)
        return null;
    return (jsx(OverviewModal, { isOpen: isOpen, onClose: onClose, isMaximized: false, showHeader: showHeader, overlay: overlay, downloadHandler: () => { }, customStyle: customStyle, header: jsxs("div", { className: "ff-header-content", children: [jsx(Icon, { width: 23, height: 23, name: "automatic_locator" }), jsx(Typography, { children: jsx("span", { className: "ff-header-title", children: headerTitle }) })] }), icons: jsx(Tooltip, { title: "Close", children: jsx(Icon, { name: "close", onClick: onClose }) }), width: width, height: height, zIndex: 999, children: jsxs("div", { className: "ff-video-wrapper", children: [children ? (children) : mediaType === 'video' ? (jsx("video", { ref: videoRef, src: src, className: "ff-media-video", onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: handleVideoEnd })) : (jsx("img", { src: src, alt: "Preview", className: "ff-media-image" })), jsxs("div", { className: "ff-top-right-icons", children: [showDownload && (jsx(Tooltip, { title: "Download", children: jsx(Icon, { name: "download_file", color: "white", onClick: onDownload }) })), showExpand && (jsx(Tooltip, { title: isFullscreen ? 'Minimize' : 'Maximize', children: jsx(Icon, { name: isFullscreen ? 'collapse_icon' : 'expand_icon', color: "white", onClick: onExpand }) }))] }), mediaType === 'video' && showControls && !children && (jsxs("div", { className: "ff-media-controls", children: [jsx("button", { onClick: onTogglePlay, className: "ff-play-pause-btn", children: jsx(Tooltip, { title: isPlaying ? 'Pause' : 'Play', children: jsx(Icon, { width: 35, height: 35, name: isPlaying ? 'pause_button' : 'play_button', color: "white" }) }) }), jsxs("div", { className: "ff-progress-bar", children: [jsx("span", { className: "ff-current-time", children: formatTime(currentTime) }), jsx("input", { type: "range", className: "ff-seek-bar", min: 0, max: 100, value: progress, onChange: (e) => handleSeek(parseFloat(e.target.value)), onClick: handleSliderClick, onMouseDown: handleMouseDown, ref: sliderRef }), jsx("span", { className: "ff-total-time", children: formatTime(duration) })] }), jsxs("div", { className: "ff-control-icons", children: [showControlDownload && (jsx(Tooltip, { title: "Download", children: jsx(Icon, { name: "download_file", color: "white", onClick: onDownload, cursorType: "pointer" }) })), showControlExpand && (jsx(Tooltip, { title: isFullscreen ? 'Minimize' : 'Maximize', children: jsx(Icon, { name: isFullscreen ? 'collapse_icon' : 'expand_icon', color: "white", onClick: onExpand, cursorType: "pointer" }) }))] })] }))] }) }));
};

export { MediaViewerModal as default };
//# sourceMappingURL=MediaViewerModal.js.map
