import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Picture as ImageIcon } from '@gravity-ui/icons';
import { Icon, Popup } from '@gravity-ui/uikit';
import { useMountedState } from 'react-use';
import { cn } from "../../../../classname.js";
import { ImageForm } from "../../../../forms/ImageForm.js";
import { i18n } from "../../../../i18n/widgets/index.js";
import { useBooleanState, useElementState } from "../../../../react-utils/hooks.js";
import "./view.css";
const b = cn('image-placeholder');
const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
export const FilePlaceholder = ({ onCancel, onSubmit, onAttach }) => {
    const isMounted = useMountedState();
    const [loading, showLoading, hideLoading] = useBooleanState(false);
    const [anchor, setAnchor] = useElementState();
    const attachHandler = useCallback((files) => {
        if (!onAttach)
            return;
        if (isMounted()) {
            showLoading();
            onAttach(files).finally(() => {
                if (isMounted()) {
                    hideLoading();
                }
            });
        }
    }, [isMounted, onAttach, showLoading, hideLoading]);
    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setAnchor, className: b(), children: [_jsx(Icon, { data: ImageIcon, size: 24 }), i18n('image')] }), _jsx(Popup, { open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: _jsx(ImageForm, { autoFocus: true, loading: loading, onCancel: onCancel, onSubmit: onSubmit, onAttach: onAttach && attachHandler }) })] }));
};
//# sourceMappingURL=view.js.map
