import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// TextStyles.tsx (Tiptap version)
import "./TextStyles.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBold, faUnderline, faAlignLeft, faAlignCenter, faItalic, faListUl, } from "@fortawesome/free-solid-svg-icons";
const TextStyles = ({ editor, updateAlignment }) => {
    const inlineStyles = [
        {
            label: "BOLD",
            style: "BOLD",
            icon: _jsx(FontAwesomeIcon, { icon: faBold, size: "sm" }),
            command: () => editor.chain().focus().toggleBold().run(),
            isActive: () => editor.isActive('bold'),
        },
        {
            label: "ITALIC",
            style: "ITALIC",
            icon: _jsx(FontAwesomeIcon, { icon: faItalic, size: "sm" }),
            command: () => editor.chain().focus().toggleItalic().run(),
            isActive: () => editor.isActive('italic'),
        },
        {
            label: "Underline",
            style: "UNDERLINE",
            icon: _jsx(FontAwesomeIcon, { icon: faUnderline, size: "sm" }),
            command: () => editor.chain().focus().toggleUnderline().run(),
            isActive: () => editor.isActive('underline'),
        },
        {
            label: "ALIGNLEFT",
            style: "ALIGNLEFT",
            icon: _jsx(FontAwesomeIcon, { icon: faAlignLeft, size: "sm" }),
            command: () => {
                updateAlignment("left");
                editor.chain().focus().setTextAlign('left').run();
            },
            isActive: () => editor.isActive({ textAlign: 'left' }) || !editor.isActive({ textAlign: 'center' }),
        },
        {
            label: "ALIGNCENTER",
            style: "ALIGNCENTER",
            icon: _jsx(FontAwesomeIcon, { icon: faAlignCenter, size: "sm" }),
            command: () => {
                updateAlignment("center");
                editor.chain().focus().setTextAlign('center').run();
            },
            isActive: () => editor.isActive({ textAlign: 'center' }),
        },
    ];
    const blockStyle = [
        {
            label: "list",
            style: "unordered-list-item",
            icon: _jsx(FontAwesomeIcon, { icon: faListUl, size: "sm" }),
            command: () => editor.chain().focus().toggleBulletList().run(),
            isActive: () => editor.isActive('bulletList'),
        },
    ];
    const applyStyle = (e, command) => {
        e.preventDefault();
        command();
    };
    return (_jsxs("div", { className: "renderInlineEditorContainer", children: [inlineStyles.map((item, idx) => (_jsx("div", { className: `renderInlineEditortoolBarItem${item.isActive() ? " renderInlineEditortoolBarItemIsActive" : ""}`, onMouseDown: (e) => {
                    e.preventDefault();
                    applyStyle(e, item.command);
                }, children: item.icon || item.label }, `${item.label}-${idx}`))), blockStyle.map((item, index) => (_jsx("div", { className: `renderInlineEditortoolBarItem ${item.isActive() ? "renderInlineEditortoolBarItemIsActive" : ""}`, onMouseDown: (e) => {
                    e.preventDefault();
                    applyStyle(e, item.command);
                }, children: item.icon || item.label }, `${item.label}-${index}`)))] }));
};
export default TextStyles;
