"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileDropZone = void 0;
var react_1 = __importStar(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var FileDropZone_module_css_1 = __importDefault(require("./FileDropZone.module.css"));
var DEFAULT_ACCEPTABLE_DRAG_TYPE = 'Files';
exports.FileDropZone = (0, react_1.memo)(function (_a) {
    var _b;
    var children = _a.children, onFileDrop = _a.onFileDrop, className = _a.className;
    var _c = (0, react_1.useState)(false), isActive = _c[0], setIsActive = _c[1];
    var isAcceptableDragType = (0, react_1.useCallback)(function (dragType) { return dragType === DEFAULT_ACCEPTABLE_DRAG_TYPE; }, []);
    var handleDragOver = (0, react_1.useCallback)(function (e) {
        e.preventDefault();
        var dragType = e.dataTransfer.types[0];
        var isValid = isAcceptableDragType(dragType);
        e.dataTransfer.dropEffect = isValid ? 'copy' : 'none';
        setIsActive(isValid);
    }, [isAcceptableDragType]);
    var handleDragEnter = (0, react_1.useCallback)(function (e) {
        e.preventDefault();
        var dragType = e.dataTransfer.types[0];
        setIsActive(isAcceptableDragType(dragType));
    }, [isAcceptableDragType]);
    var handleDragLeave = (0, react_1.useCallback)(function (e) {
        e.preventDefault();
        var relatedTarget = e.relatedTarget;
        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
        if (isLeave || !relatedTarget) {
            setIsActive(false);
        }
    }, []);
    var handleDrop = (0, react_1.useCallback)(function (e) {
        var _a, _b;
        e.preventDefault();
        setIsActive(false);
        var dragType = e.dataTransfer.types[0];
        if (!isAcceptableDragType(dragType))
            return;
        var file = (_b = (_a = e.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
        if (!file)
            return;
        onFileDrop(file);
    }, [isAcceptableDragType, onFileDrop]);
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(FileDropZone_module_css_1.default.root, className, (_b = {}, _b[FileDropZone_module_css_1.default.active] = isActive, _b)), role: "button", tabIndex: 0, "aria-label": ui_i18n_1.default.text('Drop files here'), onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop }, children));
});
exports.FileDropZone.displayName = 'FileDropZone';
