import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Popup } from '@gravity-ui/uikit';
import { useMountedState } from 'react-use';
import { cn } from "../../../../classname.js";
import { FileForm } from "../../../../forms/FileForm.js";
import { i18n } from "../../../../i18n/widgets/index.js";
import { useBooleanState, useElementState } from "../../../../react-utils/hooks.js";
import "./view.css";
const b = cn('file-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: [_jsx("span", { ref: setAnchor, className: b(), children: _jsxs("a", { href: "#", className: "yfm-file", children: [_jsx("span", { className: "yfm-file__icon" }), i18n('file')] }) }), _jsx(Popup, { open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: _jsx(FileForm, { autoFocus: true, loading: loading, onCancel: onCancel, onSubmit: onSubmit, onAttach: onAttach && attachHandler }) })] }));
};
//# sourceMappingURL=view.js.map
