import { jsx, jsxs } from "react/jsx-runtime";
import { CanvasIcon } from "../../index.js";
import { memo, useCallback } from "react";
import { useSafeLingui } from "../../../i18n/index.js";
import { CanvasTooltip } from "../CanvasTooltip.js";
import { toggleBold, toggleBulletList, toggleItalic, toggleNumberedList, toggleStrikethrough } from "./markdown-formatting/index.js";
import { FormattingButton, FormattingToolbarContainer, ToolbarSeparator } from "./StickyNoteNode.styles.js";
import { getModifierKey, isMac } from "./StickyNoteNode.utils.js";
const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
    const { _ } = useSafeLingui();
    const mod = getModifierKey();
    const shift = isMac() ? '⇧' : '+Shift+';
    const applyFormat = useCallback((formatFn)=>{
        const textarea = textAreaRef.current;
        if (!textarea) return;
        const input = {
            value: textarea.value,
            selectionStart: textarea.selectionStart,
            selectionEnd: textarea.selectionEnd
        };
        onFormat(formatFn(input));
        textarea.focus();
    }, [
        textAreaRef,
        onFormat
    ]);
    const handleBold = useCallback(()=>applyFormat(toggleBold), [
        applyFormat
    ]);
    const handleItalic = useCallback(()=>applyFormat(toggleItalic), [
        applyFormat
    ]);
    const handleStrikethrough = useCallback(()=>applyFormat(toggleStrikethrough), [
        applyFormat
    ]);
    const handleBulletList = useCallback(()=>applyFormat(toggleBulletList), [
        applyFormat
    ]);
    const handleNumberedList = useCallback(()=>applyFormat(toggleNumberedList), [
        applyFormat
    ]);
    const boldLabel = _({
        id: 'sticky-note.formatting.bold',
        message: 'Bold ({boldShortcut})',
        values: {
            boldShortcut: `${mod}+B`
        }
    });
    const italicLabel = _({
        id: 'sticky-note.formatting.italic',
        message: 'Italic ({italicShortcut})',
        values: {
            italicShortcut: `${mod}+I`
        }
    });
    const strikethroughLabel = _({
        id: 'sticky-note.formatting.strikethrough',
        message: 'Strikethrough ({strikethroughShortcut})',
        values: {
            strikethroughShortcut: `${mod}${shift}X`
        }
    });
    const bulletListLabel = _({
        id: 'sticky-note.formatting.bullet-list',
        message: 'Bullet list'
    });
    const numberedListLabel = _({
        id: 'sticky-note.formatting.numbered-list',
        message: 'Numbered list'
    });
    const toolbarLabel = _({
        id: 'sticky-note.formatting.toolbar',
        message: 'Text formatting'
    });
    return /*#__PURE__*/ jsxs(FormattingToolbarContainer, {
        role: "toolbar",
        "aria-label": toolbarLabel,
        borderColor: borderColor,
        onMouseDown: (e)=>e.preventDefault(),
        className: "nodrag nowheel",
        children: [
            /*#__PURE__*/ jsx(CanvasTooltip, {
                content: boldLabel,
                placement: "top",
                delay: true,
                children: /*#__PURE__*/ jsx(FormattingButton, {
                    isActive: activeFormats.bold,
                    onClick: handleBold,
                    "aria-label": boldLabel,
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "bold",
                        size: 14
                    })
                })
            }),
            /*#__PURE__*/ jsx(CanvasTooltip, {
                content: italicLabel,
                placement: "top",
                delay: true,
                children: /*#__PURE__*/ jsx(FormattingButton, {
                    isActive: activeFormats.italic,
                    onClick: handleItalic,
                    "aria-label": italicLabel,
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "italic",
                        size: 14
                    })
                })
            }),
            /*#__PURE__*/ jsx(CanvasTooltip, {
                content: strikethroughLabel,
                placement: "top",
                delay: true,
                children: /*#__PURE__*/ jsx(FormattingButton, {
                    isActive: activeFormats.strikethrough,
                    onClick: handleStrikethrough,
                    "aria-label": strikethroughLabel,
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "strikethrough",
                        size: 14
                    })
                })
            }),
            /*#__PURE__*/ jsx(ToolbarSeparator, {}),
            /*#__PURE__*/ jsx(CanvasTooltip, {
                content: bulletListLabel,
                placement: "top",
                delay: true,
                children: /*#__PURE__*/ jsx(FormattingButton, {
                    isActive: activeFormats.bulletList,
                    onClick: handleBulletList,
                    "aria-label": bulletListLabel,
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "list",
                        size: 14
                    })
                })
            }),
            /*#__PURE__*/ jsx(CanvasTooltip, {
                content: numberedListLabel,
                placement: "top",
                delay: true,
                children: /*#__PURE__*/ jsx(FormattingButton, {
                    isActive: activeFormats.numberedList,
                    onClick: handleNumberedList,
                    "aria-label": numberedListLabel,
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "list-ordered",
                        size: 14
                    })
                })
            })
        ]
    });
};
const FormattingToolbar = /*#__PURE__*/ memo(FormattingToolbarComponent);
export { FormattingToolbar };
