import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUnderline, faItalic, faListUl, faT, faB, } from "@fortawesome/free-solid-svg-icons";
import styles from "./TextStyles.module.scss";
const TextStyles = ({ editor }) => {
    if (!editor) {
        return null;
    }
    const inlineStyles = [
        {
            label: "TITLE",
            action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
            isActive: () => editor.isActive('heading', { level: 1 }),
            icon: _jsx(FontAwesomeIcon, { icon: faT }),
        },
        {
            label: "BOLD",
            action: () => editor.chain().focus().toggleBold().run(),
            isActive: () => editor.isActive('bold'),
            icon: _jsx(FontAwesomeIcon, { icon: faB }),
        },
        {
            label: "ITALIC",
            action: () => editor.chain().focus().toggleItalic().run(),
            isActive: () => editor.isActive('italic'),
            icon: _jsx(FontAwesomeIcon, { icon: faItalic }),
        },
        {
            label: "UNDERLINE",
            action: () => editor.chain().focus().toggleUnderline().run(),
            isActive: () => editor.isActive('underline'),
            icon: _jsx(FontAwesomeIcon, { icon: faUnderline }),
        },
    ];
    const blockStyles = [
        {
            label: "list",
            action: () => editor.chain().focus().toggleBulletList().run(),
            isActive: () => editor.isActive('bulletList'),
            icon: _jsx(FontAwesomeIcon, { icon: faListUl }),
        },
    ];
    const handleStyleClick = (e, action) => {
        e.preventDefault();
        action();
    };
    return (_jsxs("div", { className: styles.textStylesContainer, children: [_jsx("div", { className: styles.inlineStyles, children: inlineStyles.map((style) => (_jsx("button", { type: "button", className: `${styles.styleButton} ${style.isActive() ? styles.active : ""}`, onClick: (e) => handleStyleClick(e, style.action), title: style.label, children: style.icon }, style.label))) }), _jsx("div", { className: styles.blockStyles, children: blockStyles.map((style) => (_jsx("button", { type: "button", className: `${styles.styleButton} ${style.isActive() ? styles.active : ""}`, onClick: (e) => handleStyleClick(e, style.action), title: style.label, children: style.icon }, style.label))) })] }));
};
export default TextStyles;
