import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import styles from "./FontSizeControl.module.scss";
const FontSizeControl = ({ editor }) => {
    const fontSizes = ['12', '14', '16', '18', '20', '24', '32'];
    const [fontIndex, setFontIndex] = useState(2); // Default to 16px (index 2)
    const [currentFontSize, setCurrentFontSize] = useState(fontSizes[fontIndex]);
    if (!editor) {
        return null;
    }
    // Get current font size from editor
    const getCurrentFontSize = () => {
        const fontSize = editor.getAttributes('textStyle').fontSize;
        if (fontSize) {
            const numericSize = fontSize.replace('px', '');
            const index = fontSizes.indexOf(numericSize);
            return index !== -1 ? index : 2; // Default to 16px if not found
        }
        return 2; // Default to 16px
    };
    // Update font size state when editor selection changes
    useEffect(() => {
        if (editor) {
            const updateFontSize = () => {
                const currentIndex = getCurrentFontSize();
                setFontIndex(currentIndex);
                setCurrentFontSize(fontSizes[currentIndex]);
            };
            editor.on('selectionUpdate', updateFontSize);
            editor.on('transaction', updateFontSize);
            return () => {
                editor.off('selectionUpdate', updateFontSize);
                editor.off('transaction', updateFontSize);
            };
        }
    }, [editor]);
    const handleFontDecrease = () => {
        setFontIndex(prevIndex => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
    };
    const handleFontIncrease = () => {
        setFontIndex(prevIndex => (prevIndex < fontSizes.length - 1 ? prevIndex + 1 : prevIndex));
    };
    useEffect(() => {
        setCurrentFontSize(fontSizes[fontIndex]);
        // Apply the font size to the editor using the FontSize extension
        const fontSize = fontSizes[fontIndex];
        editor.chain().focus().setFontSize(`${fontSize}px`).run();
    }, [fontIndex, editor]);
    return (_jsx("div", { className: styles.fontSizeControl, children: _jsxs("span", { className: styles.fontSizeSpan, children: [_jsx("span", { className: styles.divider, children: "|" }), _jsx("span", { className: styles.btnSpan, onClick: handleFontDecrease, children: "-" }), _jsx("input", { className: styles.fontSizeInput, type: 'text', value: currentFontSize, disabled: true }), _jsx("span", { className: styles.btnSpan, onClick: handleFontIncrease, children: "+" }), _jsx("span", { className: styles.divider, children: "|" })] }) }));
};
export default FontSizeControl;
