"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilePlaceholder = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const uikit_1 = require("@gravity-ui/uikit");
const react_use_1 = require("react-use");
const classname_1 = require("../../../../classname.js");
const FileForm_1 = require("../../../../forms/FileForm.js");
const widgets_1 = require("../../../../i18n/widgets/index.js");
const hooks_1 = require("../../../../react-utils/hooks.js");
require("./view.css");
const b = (0, classname_1.cn)('file-placeholder');
const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
const FilePlaceholder = ({ onCancel, onSubmit, onAttach }) => {
    const isMounted = (0, react_use_1.useMountedState)();
    const [loading, showLoading, hideLoading] = (0, hooks_1.useBooleanState)(false);
    const [anchor, setAnchor] = (0, hooks_1.useElementState)();
    const attachHandler = (0, react_1.useCallback)((files) => {
        if (!onAttach)
            return;
        if (isMounted()) {
            showLoading();
            onAttach(files).finally(() => {
                if (isMounted()) {
                    hideLoading();
                }
            });
        }
    }, [isMounted, onAttach, showLoading, hideLoading]);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: setAnchor, className: b(), children: (0, jsx_runtime_1.jsxs)("a", { href: "#", className: "yfm-file", children: [(0, jsx_runtime_1.jsx)("span", { className: "yfm-file__icon" }), (0, widgets_1.i18n)('file')] }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: (0, jsx_runtime_1.jsx)(FileForm_1.FileForm, { autoFocus: true, loading: loading, onCancel: onCancel, onSubmit: onSubmit, onAttach: onAttach && attachHandler }) })] }));
};
exports.FilePlaceholder = FilePlaceholder;
//# sourceMappingURL=view.js.map
