import { jsx as _jsx } from "react/jsx-runtime";
import { checkBlockHasDefaultProp, checkBlockTypeHasDefaultProp, } from "@endexai/blocknote-core";
import { useCallback, useMemo } from "react";
import { RiAlignCenter, RiAlignJustify, RiAlignLeft, RiAlignRight, } from "react-icons/ri";
import { useComponentsContext } from "../../../editor/ComponentsContext.js";
import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks.js";
import { useDictionary } from "../../../i18n/dictionary.js";
const icons = {
    left: RiAlignLeft,
    center: RiAlignCenter,
    right: RiAlignRight,
    justify: RiAlignJustify,
};
export const TextAlignButton = (props) => {
    const Components = useComponentsContext();
    const dict = useDictionary();
    const editor = useBlockNoteEditor();
    const selectedBlocks = useSelectedBlocks(editor);
    const textAlignment = useMemo(() => {
        const block = selectedBlocks[0];
        if (checkBlockHasDefaultProp("textAlignment", block, editor)) {
            return block.props.textAlignment;
        }
        return;
    }, [editor, selectedBlocks]);
    const setTextAlignment = useCallback((textAlignment) => {
        editor.focus();
        for (const block of selectedBlocks) {
            if (checkBlockTypeHasDefaultProp("textAlignment", block.type, editor)) {
                editor.updateBlock(block, {
                    props: { textAlignment: textAlignment },
                });
            }
        }
    }, [editor, selectedBlocks]);
    const show = useMemo(() => {
        return !!selectedBlocks.find((block) => "textAlignment" in block.props);
    }, [selectedBlocks]);
    if (!show || !editor.isEditable) {
        return null;
    }
    const Icon = icons[props.textAlignment];
    return (_jsx(Components.FormattingToolbar.Button, { className: "bn-button", "data-test": `alignText${props.textAlignment.slice(0, 1).toUpperCase() +
            props.textAlignment.slice(1)}`, onClick: () => setTextAlignment(props.textAlignment), isSelected: textAlignment === props.textAlignment, label: dict.formatting_toolbar[`align_${props.textAlignment}`].tooltip, mainTooltip: dict.formatting_toolbar[`align_${props.textAlignment}`].tooltip, icon: _jsx(Icon, {}) }));
};
//# sourceMappingURL=TextAlignButton.js.map