'use client';
import clsx from 'clsx';
import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
import { AiOutlineCloudUpload } from 'react-icons/ai';
import { CiFileOn } from 'react-icons/ci';
import { MdDeleteOutline } from 'react-icons/md';
import { calculateFileSize, generateUniqueId } from '../../../utils';
import { Show } from '../../00-base';
import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
import { Paragraph } from '../Paragraph';
/**
 * FileUpload component for handling file selection and drag-and-drop functionality.
 *
 * @component
 * @example
 * // Example usage of FileUpload component
 * <FileUpload
 *   onFileSelect={(file) => console.log(file)}
 *   icon={<SomeIcon />}
 *   iconFile={<FileIcon />}
 *   accept=".xlsx"
 *   disabled={true}
 *   className="custom-class"
 * />
 *
 * @param {Object} props - The properties of the FileUpload component.
 * @param {function(File | null): void} props.onFileSelect - Callback function to handle file selection.
 * @param {ReactNode} [props.icon] - Optional icon to be displayed when no file is selected.
 * @param {ReactNode} props.iconFile - Icon to be displayed when a file is selected.
 * @param {string} [props.accept] - Optional string to specify the types of files that the input accepts.
 * @param {boolean} [props.disabled] - Optional boolean to specify whether it is enable or not
 * @param {string} [props.errorText] - Optional string to display when is an error
 * @param {HTMLAttributes<HTMLDivElement>} restProps - Additional properties for the div element.
 *
 * @returns {ReactNode} The rendered FileUpload component.
 */
export const FileUpload = forwardRef(function ({ onFileSelect, accept, disabled, helperText, error, input, supportText, ...restProps }, ref) {
    const [id, setId] = useState('');
    const [selectedFile, setSelectedFile] = useState(null);
    const fileInputRef = useRef(null);
    const handleDrag = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
    }, []);
    const handleDrop = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        if (e.dataTransfer.files) {
            const file = e.dataTransfer.files[0];
            setSelectedFile(file);
            onFileSelect?.(file);
        }
    }, [onFileSelect]);
    const handleChange = useCallback((e) => {
        if (e.target.files) {
            const file = e.target.files[0];
            setSelectedFile(file);
            onFileSelect?.(file);
        }
        if (fileInputRef.current) {
            fileInputRef.current.value = '';
        }
    }, [onFileSelect]);
    const clearFile = () => {
        setSelectedFile(null);
        onFileSelect?.(null);
    };
    useImperativeHandle(ref, () => ({
        clearFile,
    }));
    useEffect(() => {
        setId(generateUniqueId());
    }, []);
    return (<div className="w-full max-w-full min-w-0">
        <div {...restProps} onDragEnter={handleDrag} onDragOver={handleDrag} onDragLeave={handleDrag} onDrop={handleDrop} className={clsx('bg-gray-6 rounded-md border-2 border-dashed', error
            ? 'border-error'
            : !disabled
                ? 'border-gray-3'
                : 'border-gray-5 pointer-events-none select-none', restProps.className)}>
          <input {...input} type="file" className="hidden" id={id} onChange={handleChange} ref={fileInputRef} accept={accept} disabled={disabled}/>
          <label htmlFor={id} className="block cursor-pointer px-4 py-5">
            <Show>
              <Show.When isTrue={Boolean(selectedFile)}>
                <div className="flex items-center justify-between gap-2">
                  <CiFileOn size={32}/>
                  <div className="max-w-[calc(100%-64px-1rem)]">
                    <Paragraph size="subtitle-1" className="truncate">
                      {selectedFile?.name}
                    </Paragraph>
                    <Paragraph size="body-2" className="text-gray-1">
                      {calculateFileSize(selectedFile?.size)}
                    </Paragraph>
                  </div>
                  <button className="cursor-pointer" onClick={(e) => {
            e.preventDefault();
            clearFile();
        }}>
                    <MdDeleteOutline size={32}/>
                  </button>
                </div>
              </Show.When>
              <Show.Else>
                <div className={clsx('flex flex-wrap items-center justify-center gap-2', disabled && 'text-gray-3', error ? 'text-error' : disabled && 'text-gray-3')}>
                  <AiOutlineCloudUpload size={32}/>
                  <Paragraph size="subtitle-1" className="text-center">
                    <Show>
                      <Show.When isTrue={Boolean(supportText)}>
                        {supportText}
                      </Show.When>
                      <Show.Else>
                        Arrastra y suelta el archivo o{' '}
                        <span className="underline">búscalo</span>
                      </Show.Else>
                    </Show>
                  </Paragraph>
                </div>
              </Show.Else>
            </Show>
          </label>
        </div>
        <RenderErrorOrHelperText disabled={disabled} helperText={helperText} error={error}/>
      </div>);
});
FileUpload.displayName = 'FileUpload';
//# sourceMappingURL=FileUpload.jsx.map