import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Popup, useToaster } from '@gravity-ui/uikit';
import { ImageForm } from "../../../forms/ImageForm.js";
import { i18n } from "../../../i18n/forms/index.js";
import { useBooleanState } from "../../../react-utils/hooks.js";
import { batchUploadFiles, } from "../../../utils/upload.js";
const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
export const ToolbarImagePopup = ({ className, anchorElement, hide, onSubmit, focus, onClick, uploadImages, onSuccessUpload, imageTitle, uploadHint, }) => {
    const toaster = useToaster();
    const [loading, showLoading, hideLoading] = useBooleanState(false);
    const handleCancel = useCallback(() => {
        hide();
        focus();
    }, [focus, hide]);
    return (_jsx(Popup, { open: true, anchorElement: anchorElement, onOpenChange: handleCancel, placement: placement, className: className, children: _jsx(ImageForm, { autoFocus: true, onAttach: uploadImages &&
                ((files) => {
                    showLoading();
                    batchUploadFiles(files, uploadImages).then((res) => {
                        hideLoading();
                        hide();
                        onSuccessUpload?.(res);
                    }, (err) => {
                        hideLoading();
                        toaster.add({
                            theme: 'danger',
                            name: 'toolbar_image_upload',
                            title: i18n('image_upload_failed'),
                            content: String(err),
                        });
                    });
                }), onCancel: handleCancel, onSubmit: (data) => {
                hide();
                focus();
                onSubmit(data);
                onClick?.('addImage');
            }, loading: loading, imageTitle: imageTitle, uploadHint: uploadHint }) }));
};
//# sourceMappingURL=ToolbarImagePopup.js.map
