import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useState, useEffect } from 'react';
import AttachMedia from '../AttachMedia/AttachMedia.js';
import Modal from '../Modal/Modal.js';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';

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__default.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" })), 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 { MediaPreview as default };
//# sourceMappingURL=MediaPreview.js.map
