import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback } from "react";
import { SLATE_MARKS, SLATE_BLOCKS, SLATE_ALIGNMENTS, } from "../types";
import { SimpleToolbarButton } from "./SimpleToolbarButton";
import { SimpleDropdown } from "./SimpleDropdown";
export const SimpleToolbar = ({ profile, isMarkActive, isBlockActive, isAlignActive, isListActive, toggleMark, toggleBlock, toggleAlign, toggleList, stripFormatting, }) => {
    // Create toolbar option from configuration
    const createToolbarOption = useCallback((option) => {
        switch (option.type) {
            case "mark":
                const markConfig = SLATE_MARKS[option.id];
                if (markConfig) {
                    return {
                        id: option.id,
                        type: option.type,
                        label: markConfig.label,
                        icon: markConfig.icon,
                        isActive: isMarkActive(option.id),
                        onSelect: () => toggleMark(option.id),
                    };
                }
                return null;
            case "block":
                const blockConfig = SLATE_BLOCKS[option.id];
                if (blockConfig) {
                    return {
                        id: option.id,
                        type: option.type,
                        label: blockConfig.label,
                        icon: blockConfig.icon,
                        isActive: isBlockActive(option.id),
                        onSelect: () => toggleBlock(option.id),
                    };
                }
                return null;
            case "alignment":
                const alignConfig = SLATE_ALIGNMENTS[option.id];
                if (alignConfig) {
                    return {
                        id: option.id,
                        type: option.type,
                        label: alignConfig.label,
                        icon: alignConfig.icon,
                        isActive: isAlignActive(alignConfig.value),
                        onSelect: () => toggleAlign(alignConfig.value),
                    };
                }
                return null;
            case "list":
                const listType = option.id === "unordered-list" ? "unordered" : "ordered";
                return {
                    id: option.id,
                    type: option.type,
                    label: option.id === "unordered-list"
                        ? "Bulleted List"
                        : "Numbered List",
                    icon: option.id === "unordered-list" ? "•" : "1.",
                    isActive: isListActive(listType),
                    onSelect: () => toggleList(listType),
                };
            case "divider":
                return {
                    id: "divider",
                    type: "divider",
                    label: "Divider",
                    icon: null,
                    isActive: false,
                    onSelect: () => { },
                };
            /*case "strip":
              return {
                id: "strip-formatting",
                type: "strip",
                label: "Strip Formatting",
                icon: "✗",
                isActive: false,
                onSelect: () => stripFormatting(),
              };*/
            default:
                return null;
        }
    }, [
        isMarkActive,
        isBlockActive,
        isAlignActive,
        isListActive,
        toggleMark,
        toggleBlock,
        toggleAlign,
        toggleList,
    ]);
    // Split options by dividers
    const splitOptionsByDividers = (options) => {
        const groups = [];
        let currentGroup = [];
        options.forEach((option) => {
            if (option.type === "divider") {
                if (currentGroup.length > 0) {
                    groups.push(currentGroup);
                    currentGroup = [];
                }
            }
            else {
                currentGroup.push(option);
            }
        });
        if (currentGroup.length > 0) {
            groups.push(currentGroup);
        }
        return groups;
    };
    // Render a toolbar group
    const renderToolbarGroup = (group, rowIndex) => {
        if (!group.options || group.options.length === 0)
            return null;
        // Create toolbar options from configuration
        const validOptions = group.options
            .map(createToolbarOption)
            .filter((option) => option !== null);
        if (validOptions.length === 0)
            return null;
        const groupKey = `${group.id}-${rowIndex}`;
        // Render as buttons
        if (group.display === "buttons" || !group.display) {
            const subGroups = splitOptionsByDividers(validOptions);
            return (_jsx("div", { className: "toolbar-group", children: subGroups.map((subGroup, subGroupIndex) => (_jsx("div", { className: "toolbar-button-group", children: subGroup.map((option) => (_jsx(SimpleToolbarButton, { icon: option.icon, active: option.isActive, title: option.label, onMouseDown: (event) => {
                            event.preventDefault();
                            option.onSelect();
                        } }, `${option.type}-${option.id}`))) }, `subgroup-${subGroupIndex}`))) }, groupKey));
        }
        // Render as dropdown
        if (group.display === "dropdown") {
            const blockOptions = validOptions.filter((option) => option.type === "block");
            // If there's only one block option, render it as a disabled-style button
            if (blockOptions.length === 1) {
                const singleOption = blockOptions[0];
                if (!singleOption)
                    return null;
                return (_jsx("div", { className: "toolbar-group", children: _jsx("div", { className: "toolbar-dropdown-container", children: _jsx("button", { className: "toolbar-dropdown-button", disabled: true, children: group.label ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-content", children: [group.label, ": ", singleOption.label] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : group.showIconsOnly ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption.icon }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-icon", children: [singleOption.icon && (_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption.icon })), _jsx("span", { className: "toolbar-dropdown-content", children: singleOption.label })] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) }) }) }, groupKey));
            }
            // Multiple options - render normally with dropdown
            const isActive = validOptions.some((option) => option.isActive);
            return (_jsx("div", { className: "toolbar-group", children: _jsx("div", { className: "toolbar-dropdown-container", children: _jsx(SimpleDropdown, { options: validOptions, label: group.label, showIconsOnly: group.showIconsOnly, isActive: isActive, title: group.label
                            ? `${group.label} formatting options`
                            : "Formatting options" }) }) }, groupKey));
        }
        return null;
    };
    if (!profile.toolbar?.groups || profile.toolbar.groups.length === 0) {
        return null;
    }
    // Group toolbar items by row
    const groupsByRow = profile.toolbar.groups.reduce((acc, group, index) => {
        const row = group.row !== undefined ? group.row : index;
        if (!acc[row])
            acc[row] = [];
        acc[row].push(group);
        return acc;
    }, {});
    // Create strip formatting option that's always available
    const stripFormattingOption = {
        id: "strip-formatting",
        type: "strip",
        label: "Strip Formatting",
        icon: "✗",
        isActive: false,
        onSelect: () => stripFormatting(),
    };
    // Render each row
    return (_jsxs("div", { className: "toolbar", children: [Object.entries(groupsByRow)
                .sort(([a], [b]) => parseInt(a) - parseInt(b))
                .map(([rowIndex, rowGroups]) => (_jsxs("div", { className: "toolbar-row", children: [rowGroups.map((group) => renderToolbarGroup(group, parseInt(rowIndex))), parseInt(rowIndex) === 0 && (_jsx("div", { className: "toolbar-group", children: _jsx("div", { className: "toolbar-button-group", children: _jsx(SimpleToolbarButton, { icon: stripFormattingOption.icon, active: stripFormattingOption.isActive, title: stripFormattingOption.label, onMouseDown: (event) => {
                                    event.preventDefault();
                                    stripFormattingOption.onSelect();
                                } }, "strip-formatting") }) }))] }, `row-${rowIndex}`))), Object.keys(groupsByRow).length === 0 && (_jsx("div", { className: "toolbar-row", children: _jsx("div", { className: "toolbar-group", children: _jsx("div", { className: "toolbar-button-group", children: _jsx(SimpleToolbarButton, { icon: stripFormattingOption.icon, active: stripFormattingOption.isActive, title: stripFormattingOption.label, onMouseDown: (event) => {
                                event.preventDefault();
                                stripFormattingOption.onSelect();
                            } }, "strip-formatting") }) }) }))] }));
};
export default SimpleToolbar;
//# sourceMappingURL=SimpleToolbar.js.map