import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import Dropzone from 'react-dropzone';
import { useTranslation } from 'react-i18next';
import { Button } from '../../basic';
import './style.scss';
function AppDropzoneBodyLocalInner({ onSuccess, onError, accept, onDrop, showConfirmButton = true, }, ref) {
    const { t } = useTranslation('upload');
    const [files, setFiles] = useState([]);
    const [isUploading, setIsUploading] = useState(false);
    const filesRef = useRef([]);
    filesRef.current = files;
    const upload = async () => {
        const currentFiles = filesRef.current;
        if (currentFiles.length === 0 || isUploading)
            return;
        setIsUploading(true);
        try {
            const results = await Promise.all(currentFiles.map(async (file) => ({
                name: file.name,
                content: await file.text(),
            })));
            onSuccess(results);
        }
        catch (err) {
            onError?.(err);
        }
        finally {
            setIsUploading(false);
        }
    };
    useImperativeHandle(ref, () => ({
        upload,
    }));
    const handleDrop = (acceptedFiles) => {
        if (acceptedFiles.length === 0)
            return;
        setFiles((prev) => [...prev, ...acceptedFiles]);
        onDrop?.();
    };
    const clearFiles = () => setFiles([]);
    const removeAt = (index) => {
        setFiles((prev) => prev.filter((_, i) => i !== index));
    };
    return (_jsxs("div", { className: "dropzone-container-local", children: [files.length === 0 && (_jsx(Dropzone, { onDrop: handleDrop, accept: accept, multiple: true, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone-local", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), files.length > 0 && (_jsxs("div", { className: "uploaded-message-local", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("ul", { className: "uploaded-file-list-local", children: files.map((file, index) => (_jsxs("li", { children: [_jsx("span", { children: file.name }), _jsx("button", { type: "button", className: "uploaded-file-remove-local", onClick: (e) => {
                                        e.stopPropagation();
                                        removeAt(index);
                                    }, "aria-label": t('common:button.remove', {
                                        defaultValue: 'Remove',
                                    }), children: "\u00D7" })] }, `${file.name}-${file.size}-${index}`))) }), _jsx("button", { type: "button", className: "uploaded-clear-all-local", onClick: clearFiles, children: t('label.clear.all', { defaultValue: 'Clear all' }) }), _jsx("b", { children: t('label.confirm') })] })), files.length > 0 && showConfirmButton && (_jsx(Button, { onClick: () => {
                    void upload();
                }, text: t('common:button.confirm') }))] }));
}
const AppDropzoneBodyLocal = forwardRef(AppDropzoneBodyLocalInner);
export default AppDropzoneBodyLocal;
