import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import AttachMedia from '../AttachMedia';
import Modal from '../Modal';
import Icon from '../Icon';
import './MediaPreview.scss';
import Tooltip from '../Tooltip';
const MediaPreview = ({ onModalClose, MediaSrc, fileName, onDeleteClick, mediaType, fileId, thumbnailMediaSrc, isDelete = true, onExpandClick, onDownloadClick, isMediaIcon = false, previewOnly = false, iconName = 'video_preview', isDisabled = false, }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const videoRef = React.useRef(null);
    const handleExpand = () => {
        setIsModalOpen(true);
        onExpandClick && onExpandClick(fileId);
    };
    const handleClose = () => {
        onModalClose?.();
        setIsModalOpen(false);
    };
    const handleDownload = () => {
        onDownloadClick && onDownloadClick(fileId);
    };
    useEffect(() => {
        if (previewOnly) {
            setIsModalOpen(true);
        }
    }, [previewOnly]);
    return (_jsxs("div", { children: [!previewOnly &&
                (isMediaIcon ? (_jsx(Icon, { name: iconName, hoverEffect: true, onClick: handleExpand, disabled: isDisabled })) : (_jsx(AttachMedia, { mediaSrc: MediaSrc, mediaType: mediaType, onDownloadClick: handleDownload, onDeleteClick: () => onDeleteClick?.(MediaSrc), onExpandClick: handleExpand, fileName: fileName, fileId: fileId, thumbnailMediaSrc: thumbnailMediaSrc, isDelete: isDelete }))), isModalOpen && (_jsx(Modal, { isOpen: isModalOpen, onClose: handleClose, isFooterDisplayed: false, isHeaderDisplayed: false, customWidth: "1130px", customHeight: "570px", zIndex: 10000, children: _jsxs("div", { className: "media-wrapper", children: [_jsxs("div", { className: "ff-expand-icons", children: [_jsx(Tooltip, { title: "Download File", children: _jsx(Icon, { name: "download_file_icon", onClick: handleDownload, color: "var(--icons-default-color)", className: "header-icons" }) }), _jsx(Tooltip, { title: "Expand", children: _jsx(Icon, { name: "expand", onClick: handleExpand, color: "var(--icons-default-color)", className: "header-icons" }) }), _jsx(Tooltip, { title: "close", children: _jsx(Icon, { name: "close", onClick: handleClose, color: "var(--icons-default-color)", className: "header-icons" }) })] }), mediaType === 'image' && (_jsx("img", { src: MediaSrc, alt: "fileName", height: "auto", width: "auto" })), mediaType === 'video' && (_jsx("video", { src: MediaSrc, controls: true, controlsList: "nodownload", className: "ff-video-preview", ref: videoRef, onCanPlay: () => {
                                if (videoRef.current) {
                                    const playPromise = videoRef.current.play();
                                    if (playPromise !== undefined) {
                                        playPromise.catch((error) => {
                                            console.error('Autoplay failed:', error);
                                        });
                                    }
                                }
                            } }))] }) }))] }));
};
export default MediaPreview;
//# sourceMappingURL=MediaPreview.js.map