import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState, useEffect, useCallback } from 'react';
import './MediaViewerModal.scss';
import Icon from '../Icon';
import OverviewModal from '../OverviewModal';
import Typography from '../Typography';
import Tooltip from '../Tooltip';
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, }) => {
    const videoRef = useRef(null);
    const [currentTime, setCurrentTime] = useState(0);
    const [duration, setDuration] = useState(0);
    const [isFullscreen] = useState(false);
    useEffect(() => {
        if (mediaType === 'video' && videoRef.current && !children) {
            isPlaying ? videoRef.current.play() : videoRef.current.pause();
        }
    }, [isPlaying, mediaType, children]);
    const handleTimeUpdate = useCallback(() => {
        if (videoRef.current) {
            setCurrentTime(videoRef.current.currentTime);
        }
    }, []);
    const handleLoadedMetadata = useCallback(() => {
        if (videoRef.current) {
            setDuration(videoRef.current.duration);
        }
    }, []);
    const handleVideoEnd = useCallback(() => {
        setCurrentTime(0);
        onTogglePlay?.();
    }, [onTogglePlay]);
    const formatTime = (time) => {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60)
            .toString()
            .padStart(2, '0');
        return `${minutes}:${seconds}`;
    };
    const handleSliderChange = useCallback((newTime) => {
        if (videoRef.current) {
            videoRef.current.currentTime = newTime;
            setCurrentTime(newTime);
        }
    }, []);
    const handleSliderClick = useCallback((e) => {
        const rect = e.currentTarget.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const width = rect.width;
        const newTime = (clickX / width) * duration;
        handleSliderChange(newTime);
    }, [duration, handleSliderChange]);
    const progressPercentage = duration ? (currentTime / duration) * 100 : 0;
    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: isPlaying ? (_jsx(Icon, { width: 35, height: 35, name: "pause_button", color: "white" })) : (_jsx(Icon, { width: 35, height: 35, name: "play_button", color: "white" })) }), _jsxs("div", { className: "ff-progress-bar", children: [_jsx("span", { className: "ff-current-time", children: formatTime(currentTime) }), _jsx("div", { className: "ff-custom-slider", onClick: handleSliderClick, children: _jsxs("div", { className: "ff-slider-track", children: [_jsx("div", { className: "ff-slider-progress", style: { width: `${progressPercentage}%` } }), _jsx("div", { className: "ff-slider-thumb", style: { left: `${progressPercentage}%` } })] }) }), _jsx("span", { className: "ff-total-time", children: formatTime(duration) })] })] }))] }) }));
};
export default MediaViewerModal;
//# sourceMappingURL=MediaViewerModal.js.map