import { jsx as _jsx } from "react/jsx-runtime";
import { Dropdown } from "../components/dropdown";
import { useToolbarLocation } from "../stores/toolbar-store";
import { useMemo } from "react";
import { CodeBlock } from "../../extensions/code-block";
const defaultLevels = [1, 2, 3, 4, 5, 6];
export function Headings(props) {
    const { editor } = props;
    const toolbarLocation = useToolbarLocation();
    const currentHeadingLevel = defaultLevels.find((level) => editor.isActive("heading", { level }));
    const items = useMemo(() => toMenuItems(editor, toolbarLocation, currentHeadingLevel), 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [currentHeadingLevel, toolbarLocation]);
    return (_jsx(Dropdown, { id: "headings", group: "headings", selectedItem: currentHeadingLevel ? `Heading ${currentHeadingLevel}` : "Paragraph", items: items, menuWidth: 130, disabled: editor.isActive(CodeBlock.name) }));
}
function toMenuItems(editor, toolbarLocation, currentHeadingLevel) {
    const menuItems = defaultLevels.map((level) => ({
        type: "button",
        key: `heading-${level}`,
        title: toolbarLocation === "bottom" ? `H${level}` : `Heading ${level}`,
        isChecked: level === currentHeadingLevel,
        modifier: `Mod-Alt-${level}`,
        onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().updateAttributes("textStyle", { fontSize: null, fontStyle: null }).setHeading({ level }).run()
    }));
    const paragraph = {
        key: "paragraph",
        type: "button",
        title: "Paragraph",
        isChecked: !currentHeadingLevel,
        modifier: `Mod-Alt-0`,
        onClick: () => editor.chain().focus().setParagraph().run()
    };
    return [paragraph, ...menuItems];
}
