import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import useFileDropzone from '../../hooks/useFileDropzone';
import './FileDropzone.scss';
import Icon from '../Icon';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
import { useEffect, useMemo } from 'react';
import Dropzone from './Dropzone';
import FilePreview from './FilePreview';
import classNames from 'classnames';
import Typography from '../Typography';
import Toastify from '../Toastify';
const FileDropzone = ({ icon = (_jsx(Icon, { name: "dropzone_icon", height: 80, width: 80, hoverEffect: false })), primaryLabel = 'Drag & drop your file to upload', secondaryLabel = 'Or', buttonLabel = 'Choose File to upload', accept = [], multiple = false, maxFiles, maxSize, onMaxFilesError, maxSizeErrorMessage = '', invalidFileMessage = '', fileExistMessage = '', validateMIMEType = false, width = 640, height = 188, getAcceptedFiles = () => { }, getRejectedFiles = () => { }, isWebServiceFileDropZone = false, selectedRadioOption, radioOptions, handleOptionChange, selectedFile, setSelectedFile, handleFileChange, handleRemoveFile, isApiResponseError = false, isDisable = false, setShowDrawer, setFileContent, fileContent = '', isUploadIcon = false, onUploadFile, fileInputRef, showNoFilesUploadedMessage = false, noFileUploadedText = 'No files are uploaded', handleReplaceFile, isRemoveDisabled, isReplaceDisabled, showRejectedFileDetails = true, disabledDragAndDrop = false, tooltipPosition = 'bottom', }) => {
    const { getRootProps, getInputProps, acceptedFiles, rejectedFiles, isDragActive, handleRemoveClick, handleReplaceClick, } = useFileDropzone({
        accept,
        multiple,
        maxFiles,
        maxSize,
        onMaxFilesError,
        maxSizeErrorMessage,
        invalidFileMessage,
        fileExistMessage,
        validateMIMEType,
        isApiResponseError,
        selectedFile,
        setSelectedFile,
        handleReplaceFile,
        showRejectedFileDetails,
        disabledDragAndDrop,
        // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
    });
    useEffect(() => {
        selectedFile ? acceptedFiles : (acceptedFiles.length = 0);
    }, [selectedFile]);
    getAcceptedFiles(acceptedFiles);
    getRejectedFiles(rejectedFiles);
    const acceptedFilesList = useMemo(() => acceptedFiles.map((file) => (_jsx(FilePreview, { file: file, onRemoveClick: handleRemoveClick, onReplaceClick: handleReplaceClick, onUploadFile: onUploadFile, isUploadIcon: isUploadIcon, error: invalidFileMessage, isError: isApiResponseError, isRemoveDisabled: isRemoveDisabled, isReplaceDisabled: isReplaceDisabled, tooltipPosition: tooltipPosition }, file.name))), [
        acceptedFiles,
        handleRemoveClick,
        handleReplaceClick,
        isUploadIcon,
        onUploadFile,
    ]);
    useEffect(() => {
        if (selectedRadioOption?.value === 'Local File' && fileInputRef?.current) {
            fileInputRef.current.click();
        }
    }, [selectedRadioOption]);
    useEffect(() => {
        if (!checkEmpty(acceptedFiles) && setSelectedFile) {
            setSelectedFile(acceptedFiles[0] || null);
        }
    }, [acceptedFiles, setSelectedFile]);
    return (_jsxs("div", { className: classNames('ff-file-dropzone-wrapper'), style: { width: `${width}px` }, children: [_jsx(Toastify, {}), _jsx(Dropzone, { icon: icon, primaryLabel: primaryLabel, secondaryLabel: secondaryLabel, buttonLabel: buttonLabel, getRootProps: getRootProps, getInputProps: getInputProps, isDragActive: isDragActive, height: `${height}px`, isWebServiceFileDropZone: isWebServiceFileDropZone, selectedRadioOption: selectedRadioOption, radioOptions: radioOptions ?? [{ label: 'Default Label', value: 'default_value' }], handleOptionChange: handleOptionChange, selectedFile: selectedFile, handleFileChange: handleFileChange, handleRemoveFile: handleRemoveFile, setSelectedFile: setSelectedFile, isDisable: isDisable, setShowDrawer: setShowDrawer, setFileContent: setFileContent, fileContent: fileContent }), isWebServiceFileDropZone && (_jsx("input", { ref: fileInputRef, type: "file", className: "ff-input-ref", onChange: handleFileChange, accept: accept.join(',') })), isWebServiceFileDropZone ? null : (_jsxs("div", { className: 'ff-file-details-wrapper', style: { width: `${width}px` }, children: [showNoFilesUploadedMessage && checkEmpty(acceptedFiles) && (_jsx(Typography, { fontWeight: "semi-bold", lineHeight: "18px", textAlign: "center", color: 'var(--text-color)', className: "ff-no-apps-message", children: noFileUploadedText })), !checkEmpty(acceptedFiles) && (_jsx("div", { className: "ff-file-details", children: acceptedFilesList }))] }))] }));
};
export default FileDropzone;
//# sourceMappingURL=FileDropzone.js.map