import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { checkBlockIsFileBlock, } from "@endexai/blocknote-core";
import { useEffect, useState } from "react";
import { RiImageEditFill } from "react-icons/ri";
import { useComponentsContext } from "../../../editor/ComponentsContext.js";
import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks.js";
import { useDictionary } from "../../../i18n/dictionary.js";
import { FilePanel } from "../../FilePanel/FilePanel.js";
export const FileReplaceButton = () => {
    const dict = useDictionary();
    const Components = useComponentsContext();
    const editor = useBlockNoteEditor();
    const selectedBlocks = useSelectedBlocks(editor);
    const [isOpen, setIsOpen] = useState(false);
    useEffect(() => {
        setIsOpen(false);
    }, [selectedBlocks]);
    const block = selectedBlocks.length === 1 ? selectedBlocks[0] : undefined;
    if (block === undefined ||
        !checkBlockIsFileBlock(block, editor) ||
        !editor.isEditable) {
        return null;
    }
    return (_jsxs(Components.Generic.Popover.Root, { opened: isOpen, position: "bottom", children: [_jsx(Components.Generic.Popover.Trigger, { children: _jsx(Components.FormattingToolbar.Button, { className: "bn-button", onClick: () => setIsOpen(!isOpen), isSelected: isOpen, mainTooltip: dict.formatting_toolbar.file_replace.tooltip[block.type] ||
                        dict.formatting_toolbar.file_replace.tooltip["file"], label: dict.formatting_toolbar.file_replace.tooltip[block.type] ||
                        dict.formatting_toolbar.file_replace.tooltip["file"], icon: _jsx(RiImageEditFill, {}) }) }), _jsx(Components.Generic.Popover.Content, { className: "bn-popover-content bn-panel-popover", variant: "panel-popover", children: _jsx(FilePanel, { block: block }) })] }));
};
//# sourceMappingURL=FileReplaceButton.js.map