import { jsxs, jsx } from 'react/jsx-runtime';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';
import Typography from '../Typography/Typography.js';
import { useRef } from 'react';

const FilePreview = ({ file, error, onRemoveClick, onReplaceClick, onUploadFile, isUploadIcon, isRemoveDisabled, isReplaceDisabled, isError = false, isIndependentPreview = false, tooltipPosition = 'bottom', }) => {
    const fileInputRef = useRef(null);
    const handleReplaceClick = () => {
        if (fileInputRef.current) {
            fileInputRef.current.click();
        }
    };
    const handleFileChange = (event) => {
        const selectedFile = event.target.files?.[0];
        if (selectedFile) {
            onReplaceClick(selectedFile);
        }
        event.target.value = '';
    };
    return (jsxs("div", { className: "ff-file-details__item", children: [jsxs("div", { className: "ff-file-info", children: [jsx("div", { className: "ff-file-info__icon", children: jsx(Icon, { name: "file", color: 'var(--icons-default-color)', height: 16, width: 16 }) }), jsxs("div", { className: "ff-file-info__name-wrapper", children: [jsx(Tooltip, { title: file?.name, placement: tooltipPosition, children: jsx(Typography, { lineHeight: "18px", fontWeight: "semi-bold", color: 'var(--text-color)', className: "ff-file-info__name-wrapper__name", children: file?.name }) }), isError && (jsx(Typography, { fontSize: 8, color: 'var(--error-light)', lineHeight: "12px", letterSpacing: "0.5px", children: error }))] })] }), jsxs("div", { className: "ff-file-actions", children: [jsx("div", { className: "ff-file-actions__icon-replace", children: jsx(Tooltip, { disabled: isReplaceDisabled, title: "Replace", children: jsx(Icon, { disabled: isReplaceDisabled, name: "replace_file", color: 'var(--icons-default-color)', height: 16, width: 16, hoverEffect: true, onClick: () => {
                                    if (isIndependentPreview) {
                                        handleReplaceClick();
                                    }
                                    else {
                                        onReplaceClick(file);
                                    }
                                } }) }) }), jsx("div", { className: "ff-file-actions__icon-remove", children: jsx(Tooltip, { disabled: isRemoveDisabled, title: "Remove", children: jsx(Icon, { disabled: isRemoveDisabled, name: "close_pill", height: 16, width: 16, hoverEffect: true, onClick: () => onRemoveClick(file) }) }) }), isUploadIcon && (jsx("div", { className: "ff-file-actions__icon-remove", children: jsx(Tooltip, { title: "Upload", children: jsx(Icon, { name: "upload_pill", height: 16, width: 16, hoverEffect: true, color: 'var(--default-icon-color)', onClick: () => {
                                    onUploadFile && onUploadFile();
                                } }) }) }))] }), isIndependentPreview && (jsx("input", { type: "file", ref: fileInputRef, className: "ff-input-ref", onChange: handleFileChange, accept: file.type, style: { display: 'none' } }))] }, file.name));
};

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