import { jsx as _jsx } from "react/jsx-runtime";
import { Dropdown } from "../components/dropdown";
import { useCallback, useMemo } from "react";
import { Counter } from "../components/counter";
import { useRefValue } from "../../hooks/use-ref-value";
import { useToolbarStore } from "../stores/toolbar-store";
import { getFontById, getFontIds, getFonts } from "../../utils/font";
import { CodeBlock } from "../../extensions/code-block";
export function FontSize(props) {
    const { editor } = props;
    const defaultFontSize = useToolbarStore((store) => store.fontSize);
    const { fontSize } = editor.getAttributes("textStyle");
    const fontSizeAsNumber = useRefValue(fontSize ? parseInt(fontSize.replace("px", "")) || 16 : defaultFontSize);
    const decreaseFontSize = useCallback(() => {
        return Math.max(8, fontSizeAsNumber.current - 1);
    }, [fontSizeAsNumber]);
    const increaseFontSize = useCallback(() => {
        return Math.min(120, fontSizeAsNumber.current + 1);
    }, [fontSizeAsNumber]);
    return (_jsx(Counter, { title: "Font size", disabled: editor.isActive(CodeBlock.name), onDecrease: () => editor.chain().focus().setFontSize(`${decreaseFontSize()}px`).run(), onIncrease: () => {
            editor.chain().focus().setFontSize(`${increaseFontSize()}px`).run();
        }, onReset: () => editor.chain().focus().setFontSize(`${defaultFontSize}px`).run(), value: fontSize || `${defaultFontSize}px` }));
}
export function FontFamily(props) {
    var _a;
    const { editor } = props;
    const defaultFontFamily = useToolbarStore((store) => store.fontFamily);
    const currentFontFamily = getFontIds().find((id) => editor.isActive("textStyle", { fontFamily: id })) || defaultFontFamily;
    const items = useMemo(() => toMenuItems(editor, currentFontFamily), 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [currentFontFamily]);
    return (_jsx(Dropdown, { id: "fontFamily", group: "font", selectedItem: ((_a = getFontById(currentFontFamily)) === null || _a === void 0 ? void 0 : _a.title) || defaultFontFamily, items: items, menuWidth: 130, disabled: editor.isActive(CodeBlock.name) }));
}
function toMenuItems(editor, currentFontFamily) {
    const menuItems = [];
    for (const font of getFonts()) {
        menuItems.push({
            key: font.id,
            type: "button",
            title: font.title,
            isChecked: font.id === currentFontFamily,
            onClick: () => editor.chain().focus().setFontFamily(font.id).run(),
            styles: {
                title: {
                    fontFamily: font.font
                }
            }
        });
    }
    return menuItems;
}
