import { jsx, jsxs } from "react/jsx-runtime";
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND } from "@lexical/list";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $isHeadingNode } from "@lexical/rich-text";
import { $isAtNodeEnd } from "@lexical/selection";
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
import { Code, FormatBold, FormatItalic, FormatListBulleted, FormatListNumbered, FormatStrikethrough, FormatUnderlined, Link } from "@mui/icons-material";
import { Tooltip } from "@mui/material";
import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
import { useCallback, useEffect, useRef, useState } from "react";
import { useSafeLingui } from "../../../../i18n/useSafeLingui.js";
const LowPriority = 1;
function Divider() {
    return /*#__PURE__*/ jsx("div", {
        className: "divider"
    });
}
function getSelectedNode(selection) {
    const anchor = selection.anchor;
    const focus = selection.focus;
    const anchorNode = selection.anchor.getNode();
    const focusNode = selection.focus.getNode();
    if (anchorNode === focusNode) return anchorNode;
    const isBackward = selection.isBackward();
    if (isBackward) return $isAtNodeEnd(focus) ? anchorNode : focusNode;
    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
}
function ToolbarPlugin({ disabled = false }) {
    const [editor] = useLexicalComposerContext();
    const toolbarRef = useRef(null);
    const { _ } = useSafeLingui();
    const [isBold, setIsBold] = useState(false);
    const [isItalic, setIsItalic] = useState(false);
    const [isUnderline, setIsUnderline] = useState(false);
    const [isStrikethrough, setIsStrikethrough] = useState(false);
    const [blockType, setBlockType] = useState('paragraph');
    const [isLink, setIsLink] = useState(false);
    const [isCode, setIsCode] = useState(false);
    const $updateToolbar = useCallback(()=>{
        const selection = $getSelection();
        if ($isRangeSelection(selection)) {
            const anchorNode = selection.anchor.getNode();
            const element = 'root' === anchorNode.getKey() ? anchorNode : anchorNode.getTopLevelElementOrThrow();
            const elementKey = element.getKey();
            const elementDOM = editor.getElementByKey(elementKey);
            if (null !== elementDOM) if ($isListNode(element)) {
                const parentList = $getNearestNodeOfType(anchorNode, ListNode);
                const type = parentList ? parentList.getTag() : element.getTag();
                setBlockType(type);
            } else {
                const type = $isHeadingNode(element) ? element.getTag() : element.getType();
                setBlockType(type);
            }
            setIsBold(selection.hasFormat('bold'));
            setIsItalic(selection.hasFormat('italic'));
            setIsUnderline(selection.hasFormat('underline'));
            setIsStrikethrough(selection.hasFormat('strikethrough'));
            setIsCode(selection.hasFormat('code'));
            const node = getSelectedNode(selection);
            const parent = node.getParent();
            $isLinkNode(parent) || $isLinkNode(node) ? setIsLink(true) : setIsLink(false);
        }
    }, [
        editor
    ]);
    useEffect(()=>mergeRegister(editor.registerUpdateListener(({ editorState })=>{
            editorState.read(()=>{
                $updateToolbar();
            });
        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, ()=>{
            $updateToolbar();
            return false;
        }, LowPriority)), [
        editor,
        $updateToolbar
    ]);
    return /*#__PURE__*/ jsxs("div", {
        className: `toolbar${disabled ? ' disabled' : ''}`,
        ref: toolbarRef,
        role: "toolbar",
        "aria-orientation": "horizontal",
        "aria-disabled": disabled,
        children: [
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.bold'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
                    },
                    disabled: disabled,
                    className: 'toolbar-item spaced ' + (isBold ? 'active' : ''),
                    "aria-pressed": isBold,
                    "aria-label": _({
                        id: 'rich-text-editor.format-bold'
                    }),
                    children: /*#__PURE__*/ jsx(FormatBold, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            }),
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.italic'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
                    },
                    className: 'toolbar-item spaced ' + (isItalic ? 'active' : ''),
                    "aria-pressed": isItalic,
                    disabled: disabled,
                    "aria-label": _({
                        id: 'rich-text-editor.format-italic'
                    }),
                    children: /*#__PURE__*/ jsx(FormatItalic, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            }),
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.underline'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
                    },
                    className: 'toolbar-item spaced ' + (isUnderline ? 'active' : ''),
                    "aria-pressed": isUnderline,
                    disabled: disabled,
                    "aria-label": _({
                        id: 'rich-text-editor.format-underline'
                    }),
                    children: /*#__PURE__*/ jsx(FormatUnderlined, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            }),
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.strikethrough'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
                    },
                    className: 'toolbar-item spaced ' + (isStrikethrough ? 'active' : ''),
                    "aria-pressed": isStrikethrough,
                    disabled: disabled,
                    "aria-label": _({
                        id: 'rich-text-editor.format-strikethrough'
                    }),
                    children: /*#__PURE__*/ jsx(FormatStrikethrough, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            }),
            /*#__PURE__*/ jsx(Divider, {}),
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.unordered-list'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        if ('ul' !== blockType) editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
                        else editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
                    },
                    className: 'toolbar-item spaced ' + ('ul' === blockType ? 'active' : ''),
                    disabled: disabled,
                    "aria-pressed": 'ul' === blockType,
                    "aria-label": _({
                        id: 'rich-text-editor.format-unordered-list'
                    }),
                    children: /*#__PURE__*/ jsx(FormatListBulleted, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            }),
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.ordered-list'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        if ('ol' !== blockType) editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
                        else editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
                    },
                    className: 'toolbar-item spaced ' + ('ol' === blockType ? 'active' : ''),
                    disabled: disabled,
                    "aria-pressed": 'ol' === blockType,
                    "aria-label": _({
                        id: 'rich-text-editor.format-ordered-list'
                    }),
                    children: /*#__PURE__*/ jsx(FormatListNumbered, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            }),
            /*#__PURE__*/ jsx(Divider, {}),
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.link'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        if (isLink) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
                        else editor.update(()=>{
                            const selection = $getSelection();
                            if ($isRangeSelection(selection)) selection.insertText(`[${selection.getTextContent() || 'text'}](link)`);
                        });
                    },
                    className: 'toolbar-item spaced ' + (isLink ? 'active' : ''),
                    disabled: disabled,
                    "aria-pressed": isLink,
                    "aria-label": _({
                        id: 'rich-text-editor.insert-link'
                    }),
                    children: /*#__PURE__*/ jsx(Link, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            }),
            /*#__PURE__*/ jsx(Tooltip, {
                title: _({
                    id: 'rich-text-editor.code'
                }),
                children: /*#__PURE__*/ jsx("button", {
                    type: "button",
                    onClick: ()=>{
                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
                    },
                    className: 'toolbar-item spaced ' + (isCode ? 'active' : ''),
                    "aria-pressed": isCode,
                    disabled: disabled,
                    "aria-label": _({
                        id: 'rich-text-editor.format-code'
                    }),
                    children: /*#__PURE__*/ jsx(Code, {
                        sx: {
                            fontSize: '24px'
                        }
                    })
                })
            })
        ]
    });
}
export { ToolbarPlugin as default };
