"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarPlugin = void 0;
const react_1 = __importStar(require("react"));
const inlines_1 = require("inlines");
const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
const lexical_1 = require("lexical");
const link_1 = require("@lexical/link");
const utils_1 = require("../utils");
const utils_2 = require("@lexical/utils");
const list_1 = require("@lexical/list");
const rich_text_1 = require("@lexical/rich-text");
const __1 = require("../..");
const icons_1 = require("../../../icons");
const selection_1 = require("@lexical/selection");
const ImagePlugin_1 = require("./ImagePlugin");
const ImageUploadModal_1 = require("../components/ImageUploadModal");
const AddEmbedModal_1 = require("../components/AddEmbedModal");
const EmbedPlugin_1 = require("./EmbedPlugin");
function ToolbarPlugin() {
    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
    const [type, setType] = (0, react_1.useState)('body');
    const [isBold, setIsBold] = (0, react_1.useState)(false);
    const [isItalic, setIsItalic] = (0, react_1.useState)(false);
    const [isStrikeThrough, setIsStrikeThrough] = (0, react_1.useState)(false);
    const [isLink, setIsLink] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        editor.registerUpdateListener(({ editorState }) => {
            editorState.read(() => {
                const selection = (0, lexical_1.$getSelection)();
                if (!(0, lexical_1.$isRangeSelection)(selection))
                    return;
                setIsBold(selection.hasFormat('bold'));
                setIsItalic(selection.hasFormat('italic'));
                setIsStrikeThrough(selection.hasFormat('strikethrough'));
                const node = (0, utils_1.getSelectedNode)(selection);
                const parent = node.getParent();
                setIsLink((0, link_1.$isLinkNode)(parent) || (0, link_1.$isLinkNode)(node));
                const anchorNode = selection.anchor.getNode();
                const element = anchorNode.getKey() === 'root'
                    ? anchorNode
                    : (0, utils_2.$findMatchingParent)(anchorNode, (e) => {
                        const parent = e.getParent();
                        return parent !== null && (0, lexical_1.$isRootOrShadowRoot)(parent);
                    });
                if ((0, list_1.$isListNode)(element)) {
                    const parentList = (0, utils_2.$getNearestNodeOfType)(anchorNode, list_1.ListNode);
                    const type = parentList
                        ? parentList.getListType()
                        : element.getListType();
                    if (type === 'bullet') {
                        setType('bullet');
                    }
                }
                else if ((0, rich_text_1.$isHeadingNode)(element)) {
                    switch (element.getTag()) {
                        case 'h1': {
                            setType('title');
                            break;
                        }
                        case 'h2': {
                            setType('heading');
                            break;
                        }
                        case 'h3': {
                            setType('subheading');
                            break;
                        }
                    }
                }
                else if ((0, lexical_1.$isParagraphNode)(element)) {
                    setType('body');
                }
            });
        });
    }, [editor]);
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            position: 'absolute',
            top: 12,
            left: 16,
            display: 'flex',
            alignItems: 'center',
            '& > * + *': {
                marginLeft: '4px',
            },
        } },
        react_1.default.createElement(__1.Dropdown.Root, null,
            react_1.default.createElement(__1.Dropdown.Trigger, null,
                react_1.default.createElement(__1.Button, { size: "small", color: "system", icon: react_1.default.createElement(icons_1.IconText, null) })),
            react_1.default.createElement(__1.Dropdown.Items, null,
                react_1.default.createElement(__1.Dropdown.Item, { icon: type === 'title' && react_1.default.createElement(icons_1.IconCheckLarge, null), onClick: () => {
                        editor.update(() => {
                            const selection = (0, lexical_1.$getSelection)();
                            if ((0, lexical_1.$isRangeSelection)(selection)) {
                                selection.getNodes().forEach((node) => {
                                    if ((0, lexical_1.$isTextNode)(node)) {
                                        node.setFormat(0);
                                    }
                                });
                                (0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createHeadingNode)('h1'));
                            }
                        });
                    } }, "Title"),
                react_1.default.createElement(__1.Dropdown.Item, { icon: type === 'heading' && react_1.default.createElement(icons_1.IconCheckLarge, null), onClick: () => {
                        editor.update(() => {
                            const selection = (0, lexical_1.$getSelection)();
                            if ((0, lexical_1.$isRangeSelection)(selection)) {
                                selection.getNodes().forEach((node) => {
                                    if ((0, lexical_1.$isTextNode)(node)) {
                                        node.setFormat(0);
                                    }
                                });
                                (0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createHeadingNode)('h2'));
                            }
                        });
                    } }, "Heading"),
                react_1.default.createElement(__1.Dropdown.Item, { icon: type === 'subheading' && react_1.default.createElement(icons_1.IconCheckLarge, null), onClick: () => {
                        editor.update(() => {
                            const selection = (0, lexical_1.$getSelection)();
                            if ((0, lexical_1.$isRangeSelection)(selection)) {
                                selection.getNodes().forEach((node) => {
                                    if ((0, lexical_1.$isTextNode)(node)) {
                                        node.setFormat(0);
                                    }
                                });
                                (0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createHeadingNode)('h3'));
                            }
                        });
                    } }, "Subheading"),
                react_1.default.createElement(__1.Dropdown.Item, { icon: type === 'body' && react_1.default.createElement(icons_1.IconCheckLarge, null), onClick: () => {
                        editor.update(() => {
                            const selection = (0, lexical_1.$getSelection)();
                            if ((0, lexical_1.$isRangeSelection)(selection)) {
                                selection.getNodes().forEach((node) => {
                                    if ((0, lexical_1.$isTextNode)(node)) {
                                        node.setFormat(0);
                                    }
                                });
                                (0, selection_1.$setBlocksType)(selection, () => (0, lexical_1.$createParagraphNode)());
                            }
                        });
                    } }, "Body"))),
        react_1.default.createElement(__1.Button, { size: "small", color: isBold ? 'neutral' : 'system', icon: react_1.default.createElement(icons_1.IconFormatBold, null), onClick: () => {
                editor.update(() => {
                    const selection = (0, lexical_1.$getSelection)();
                    if ((0, lexical_1.$isRangeSelection)(selection)) {
                        editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'bold');
                    }
                });
            } }),
        react_1.default.createElement(__1.Button, { size: "small", color: isItalic ? 'neutral' : 'system', icon: react_1.default.createElement(icons_1.IconFormatItalic, null), onClick: () => {
                editor.update(() => {
                    const selection = (0, lexical_1.$getSelection)();
                    if ((0, lexical_1.$isRangeSelection)(selection)) {
                        editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'italic');
                    }
                });
            } }),
        react_1.default.createElement(__1.Button, { size: "small", color: isStrikeThrough ? 'neutral' : 'system', icon: react_1.default.createElement(icons_1.IconFormatStrikethrough, null), onClick: () => {
                editor.update(() => {
                    const selection = (0, lexical_1.$getSelection)();
                    if ((0, lexical_1.$isRangeSelection)(selection)) {
                        editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'strikethrough');
                    }
                });
            } }),
        react_1.default.createElement(__1.Button, { size: "small", color: isLink ? 'neutral' : 'system', icon: react_1.default.createElement(icons_1.IconLink, null), onClick: () => {
                editor.update(() => {
                    editor.dispatchCommand(link_1.TOGGLE_LINK_COMMAND, isLink ? null : prompt('enter url'));
                });
            } }),
        react_1.default.createElement(__1.Button, { size: "small", color: type === 'bullet' ? 'neutral' : 'system', icon: react_1.default.createElement(icons_1.IconListBullet, null), onClick: () => {
                editor.update(() => {
                    editor.dispatchCommand(type === 'bullet'
                        ? list_1.REMOVE_LIST_COMMAND
                        : list_1.INSERT_UNORDERED_LIST_COMMAND, undefined);
                });
            } }),
        react_1.default.createElement(ImageUploadModal_1.ImageUploadModal, { onSave: ({ file, caption }) => {
                editor.update(() => {
                    editor.dispatchCommand(ImagePlugin_1.INSERT_IMAGE_COMMAND, {
                        src: file.src,
                        caption,
                    });
                });
            } },
            react_1.default.createElement(__1.Button, { size: "small", color: "system", icon: react_1.default.createElement(icons_1.IconImage, null) })),
        react_1.default.createElement(AddEmbedModal_1.AddEmbedModal, { onSave: ({ html }) => {
                editor.update(() => {
                    editor.dispatchCommand(EmbedPlugin_1.INSERT_EMBED_COMMAND, {
                        html,
                    });
                });
            } },
            react_1.default.createElement(__1.Button, { size: "small", color: "system", icon: react_1.default.createElement(icons_1.IconLayerThree, null) }))));
}
exports.ToolbarPlugin = ToolbarPlugin;
//# sourceMappingURL=ToolbarPlugin.js.map