import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
import { ArrowUpToLine } from '@gravity-ui/icons';
import { Icon, Text } from '@gravity-ui/uikit';
import { block } from "../../../utils/cn.js";
import { i18n } from "./i18n/index.js";
import "./FileDropZone.css";
const b = block('file-drop-zone');
/**
 * FileDropZone provides a drag-and-drop area plus a hidden file input for picking files.
 * Uses native HTML5 DnD — no external dependencies.
 */
export const FileDropZone = ({ accept, multiple = true, disabled = false, onAdd, label, hint, className, }) => {
    const [isDragging, setIsDragging] = useState(false);
    const inputRef = useRef(null);
    const handleFiles = useCallback((fileList) => {
        if (!fileList || fileList.length === 0)
            return;
        const files = Array.from(fileList);
        onAdd(files);
    }, [onAdd]);
    const handleDragOver = useCallback((e) => {
        e.preventDefault();
        if (!disabled)
            setIsDragging(true);
    }, [disabled]);
    const handleDragLeave = useCallback((e) => {
        e.preventDefault();
        setIsDragging(false);
    }, []);
    const handleDrop = useCallback((e) => {
        e.preventDefault();
        setIsDragging(false);
        if (disabled)
            return;
        handleFiles(e.dataTransfer.files);
    }, [disabled, handleFiles]);
    const handleInputChange = useCallback((e) => {
        handleFiles(e.target.files);
        // Reset input so the same file can be picked again
        // eslint-disable-next-line no-param-reassign
        e.target.value = '';
    }, [handleFiles]);
    const handleClick = useCallback(() => {
        var _a;
        if (!disabled)
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
    }, [disabled]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleClick();
        }
    }, [handleClick]);
    return (_jsxs("div", { className: b({ dragging: isDragging, disabled }, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, onKeyDown: handleKeyDown, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, children: [_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, onChange: handleInputChange, className: b('input'), tabIndex: -1, "aria-hidden": true }), _jsx(Icon, { data: ArrowUpToLine, size: 24, className: b('icon') }), _jsx(Text, { variant: "body-2", className: b('label'), children: label !== null && label !== void 0 ? label : i18n('label') }), hint && (_jsx(Text, { variant: "body-1", className: b('hint'), children: hint }))] }));
};
//# sourceMappingURL=FileDropZone.js.map
