"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileDropZone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const cn_1 = require("../../../utils/cn.js");
const i18n_1 = require("./i18n/index.js");
require("./FileDropZone.css");
const b = (0, cn_1.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.
 */
const FileDropZone = ({ accept, multiple = true, disabled = false, onAdd, label, hint, className, }) => {
    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
    const inputRef = (0, react_1.useRef)(null);
    const handleFiles = (0, react_1.useCallback)((fileList) => {
        if (!fileList || fileList.length === 0)
            return;
        const files = Array.from(fileList);
        onAdd(files);
    }, [onAdd]);
    const handleDragOver = (0, react_1.useCallback)((e) => {
        e.preventDefault();
        if (!disabled)
            setIsDragging(true);
    }, [disabled]);
    const handleDragLeave = (0, react_1.useCallback)((e) => {
        e.preventDefault();
        setIsDragging(false);
    }, []);
    const handleDrop = (0, react_1.useCallback)((e) => {
        e.preventDefault();
        setIsDragging(false);
        if (disabled)
            return;
        handleFiles(e.dataTransfer.files);
    }, [disabled, handleFiles]);
    const handleInputChange = (0, react_1.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 = (0, react_1.useCallback)(() => {
        var _a;
        if (!disabled)
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
    }, [disabled]);
    const handleKeyDown = (0, react_1.useCallback)((e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleClick();
        }
    }, [handleClick]);
    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, onChange: handleInputChange, className: b('input'), tabIndex: -1, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowUpToLine, size: 24, className: b('icon') }), (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", className: b('label'), children: label !== null && label !== void 0 ? label : (0, i18n_1.i18n)('label') }), hint && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-1", className: b('hint'), children: hint }))] }));
};
exports.FileDropZone = FileDropZone;
//# sourceMappingURL=FileDropZone.js.map
