import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useId } from 'react';
import { cn } from '../../../../scalars/lib/utils.js';
import FileBackground from '../../icon-components/FileBackground.js';
import { useDropzone } from 'react-dropzone';
import { formatBytes, getExtensionsFromMimeTypes } from './utils.js';
import { Button } from '../../../../scalars/components/fragments/button/button.js';
import { useFileUpload } from './useUploadFile.js';
import { FileUploadItem } from './sub-components/file-upload-item.js';
import { Icon } from '../../icon/index.js';
import { Input } from '../../../../ui/components/data-entry/input/index.js';
import { FormLabel } from '../../../../scalars/components/fragments/form-label/form-label.js';
import { FormMessageList } from '../../../../scalars/components/fragments/form-message/index.js';
const FileInput = React.forwardRef(({ name, label, description, required, disabled = false, errors = [], warnings = [], id: propId, maxFileSize, allowedFileTypes, value, defaultValue, dragAndDropEnabled = true, onChange, 
// Item Props
fileName, fileSize, mimeType, progress, onCancel, onReload, showPreview = false, errorsUpload, status = 'idle', ...props }, ref) => {
    const prefix = useId();
    const id = propId ?? `${prefix}-file`;
    const hasError = Array.isArray(errors) && errors.length > 0;
    const hasWarning = Array.isArray(warnings) && warnings.length > 0;
    const allowedFileTypesString = Array.isArray(allowedFileTypes) ? allowedFileTypes : [];
    const { handleDrop, borderIndicator, preview, handleCancelPreview, handleOnPreview, isPreviewOpen, previewStatus, typePreview, } = useFileUpload({
        value,
        defaultValue,
        onChange,
    });
    const { getInputProps, getRootProps, open, inputRef } = useDropzone({
        onDropAccepted: (acceptedFiles) => {
            handleDrop(acceptedFiles);
        },
        noClick: status !== 'idle',
        noKeyboard: status !== 'idle',
    });
    return (_jsxs("div", { className: "flex flex-col", children: [!!label && (_jsx(FormLabel, { htmlFor: id, id: `${id}-label`, disabled: disabled, hasError: hasError, required: required, className: cn(disabled && 'pointer-events-none'), children: label })), _jsx("div", { className: "flex flex-col w-full h-full pt-3.5 min-h-[148px]", children: _jsxs("div", { className: "relative h-[148px]", children: [_jsx("div", { className: cn('absolute z-0 h-full w-full', borderIndicator), "data-state": value ? 'selected' : 'idle', "data-testid": "file-input-border", children: _jsx(FileBackground, { className: "w-full h-full opacity-50" }) }), _jsxs("div", { ...getRootProps({
                                role: 'group',
                                className: cn('dropzone', 'relative flex w-full flex-col h-full cursor-pointer', !dragAndDropEnabled && 'opacity-50 pointer-events-none cursor-not-allowed', disabled && 'cursor-not-allowed', 
                                // padding
                                'px-3 py-4'),
                                tabIndex: disabled ? -1 : 0,
                            }), "data-testid": "file-drop-area", children: [status === 'idle' && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [_jsx(Icon, { name: "FileUpload", size: 40, className: "text-gray-500", "aria-hidden": "true" }), _jsx("p", { className: "text-gray-500 font-normal text-sm leading-5", children: description })] })), status !== 'idle' && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center p-4", children: _jsx("div", { className: "w-full max-w-full", children: _jsx(FileUploadItem, { errorsUpload: errorsUpload, mimeType: mimeType, fileName: fileName, fileSize: formatBytes(fileSize ?? 0, 2), progress: progress, status: status, onCancel: onCancel, onReload: onReload, 
                                            // Preview Props
                                            preview: preview, showPreview: showPreview, handleOnCancelPreview: handleCancelPreview, isPreviewOpen: isPreviewOpen, handleOnPreview: handleOnPreview, previewStatus: previewStatus, typePreview: typePreview }) }) })), _jsx("input", { ref: ref, type: "hidden", name: name }), _jsx(Input, { ...getInputProps({
                                        id,
                                        required,
                                        disabled,
                                        type: 'file',
                                        multiple: false,
                                        ...props,
                                    }), "aria-invalid": hasError, "aria-required": required, "aria-labelledby": label ? `${id}-label` : undefined, ref: inputRef })] }), status === 'idle' && (_jsx("div", { className: cn('absolute bottom-4 left-1/2 transform -translate-x-1/2 z-1 pointer-events-auto', disabled && 'pointer-events-none'), children: _jsx(Button, { type: "button", onClick: open, disabled: disabled, "aria-label": "Search File", className: cn('inline-block h-10 bg-white border border-[#E4E4E7] rounded-md text-gray-500 cursor-pointer text-sm font-medium leading-5', 
                                // padding
                                'px-4 py-2', 
                                // hover
                                'hover:bg-white hover:text-gray-500 hover:cursor-pointer'), children: "Search File" }) }))] }) }), _jsxs("div", { className: "flex flex-col gap-2 mt-2", children: [_jsxs("span", { className: "text-gray-500 font-normal text-xs leading-4.5 truncate", children: ["Supports: ", getExtensionsFromMimeTypes(allowedFileTypesString).join(', ')] }), _jsxs("span", { className: "text-gray-500 font-medium text-xs leading-4.5 truncate", children: ["Max: ", formatBytes(maxFileSize, 2)] })] }), _jsxs("div", { className: "flex flex-col gap-2 mt-2", children: [hasError && _jsx(FormMessageList, { messages: errors, type: "error" }), hasWarning && _jsx(FormMessageList, { messages: warnings, type: "warning" })] })] }));
});
FileInput.displayName = 'FileInput';
export { FileInput };
//# sourceMappingURL=file-input.js.map