import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './FileDropzone.scss';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import Typography from '../Typography';
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 default FilePreview;
//# sourceMappingURL=FilePreview.js.map