import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import Icon from '../Icon';
import Typography from '../Typography';
import './overviewModal.scss';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
const OverviewModal = ({ isOpen, onClose, isMaximized, width = '800px', height = '432px', header, children, zIndex = 999, icons, downloadFileIcon = false, showHeader = true, top = '0', overlay = true, downloadHandler, multiData = [], setSelectedVideo, customStyle, }) => {
    const [videos, setVideos] = useState(multiData);
    useEffect(() => {
        if (!checkEmpty(multiData)) {
            setVideos(multiData);
        }
    }, [multiData]);
    useEffect(() => {
        const handleKeyDown = (event) => {
            if (event.key === 'Escape') {
                onClose?.();
            }
        };
        if (isOpen) {
            document.addEventListener('keydown', handleKeyDown);
        }
        return () => {
            document.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen, onClose]);
    if (!isOpen)
        return null;
    const isEmptyData = checkEmpty(videos);
    const singleClass = videos.length === 1 ? ' image-grid--single' : '';
    const handleVideoEnd = (index) => {
        setVideos((prev) => {
            const updated = prev.filter((_, i) => i !== index);
            if (updated.length === 0) {
                onClose?.();
            }
            return updated;
        });
    };
    const modalContent = (_jsx("div", { className: "ff-overview-modal-overlay", style: {
            background: overlay ? 'var(--default-icon-color)' : undefined,
            zIndex,
        }, children: _jsxs("div", { className: classNames('ff-overview-modal-container', {
                'ff-overview-maximized-container': isMaximized,
            }), style: {
                ...customStyle,
                '--modal-width': width,
                '--modal-height': height,
                '--modal-top': top,
            }, children: [showHeader && (_jsxs("div", { className: "ff-overview-modal-header", children: [header, _jsxs("div", { className: "ff-overview-modal-icons", children: [downloadFileIcon && (_jsx(Icon, { width: 16, height: 16, name: "download_file", onClick: downloadHandler })), icons] })] })), _jsx("div", { className: classNames('ff-overview-modal-body', {
                        'ff-overview-modal-body--centered': isEmptyData,
                    }), children: !isEmptyData ? (_jsx("div", { className: `image-grid${singleClass}`, children: videos.map((video, idx) => (_jsxs("div", { className: "ff-overview-modal-image-item", children: [_jsx("video", { src: video.src, autoPlay: true, muted: true, playsInline: true, preload: "auto", controls: false, onEnded: () => handleVideoEnd(idx), className: "ff-overview-modal-video", children: "Your browser does not support the video tag." }), _jsxs("div", { className: "ff-overview-modal-image-name", children: [_jsx(Icon, { name: video.icon }), _jsxs(Typography, { children: [video.machineName, " - ", video.scriptName] })] }), _jsx(Icon, { width: 16, height: 16, className: "ff-overview-modal-image-action", name: "maximize_new", onClick: () => {
                                        const clickedVideo = {
                                            currentVideoData: { ...video, clickedAt: Date.now() },
                                            allVideoData: videos,
                                        };
                                        setSelectedVideo?.(clickedVideo);
                                    } }), _jsxs(Typography, { color: "var(--ff-chip-bg)", className: "ff-overview-modal-scripts", children: [video.currentScripts, "/", video.totalScripts] })] }, idx))) })) : (children) })] }) }));
    return ReactDOM.createPortal(modalContent, document.body);
};
export default OverviewModal;
//# sourceMappingURL=overviewModal.js.map