"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImagePlaceholder = 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 react_use_1 = require("react-use");
const classname_1 = require("../../../../classname.js");
const ImageForm_1 = require("../../../../forms/ImageForm.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)('image-placeholder');
const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
const defaultFormRenderer = (props) => {
    return ((0, jsx_runtime_1.jsx)(ImageForm_1.ImageForm, { autoFocus: true, loading: props.uploading, onCancel: props.onCancel, onSubmit: props.onSubmit, onAttach: props.onAttach }));
};
const ImagePlaceholder = ({ onCancel, onSubmit, onAttach, renderForm, }) => {
    const isMounted = (0, react_use_1.useMountedState)();
    const [uploading, startUploading, stopUploading] = (0, hooks_1.useBooleanState)(false);
    const [anchor, setAnchor] = (0, hooks_1.useElementState)();
    const attachHandler = (0, react_1.useCallback)((files) => {
        if (!onAttach)
            return;
        if (isMounted()) {
            startUploading();
            onAttach(files).finally(() => {
                if (isMounted()) {
                    stopUploading();
                }
            });
        }
    }, [isMounted, onAttach, startUploading, stopUploading]);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: setAnchor, className: b(), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Picture, size: 24 }), (0, widgets_1.i18n)('image')] }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: (renderForm || defaultFormRenderer)({
                    onCancel,
                    onSubmit,
                    uploading,
                    onAttach: onAttach && attachHandler,
                }) })] }));
};
exports.ImagePlaceholder = ImagePlaceholder;
//# sourceMappingURL=view.js.map
