import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { useEditContext } from "../../client/editContext";
import { SimpleIconButton } from "../../ui/SimpleIconButton";
import { loadCustomCommands } from "../../services/customCommandsService";
import { LicenseFeatures, useFeature } from "../../../licensing";
import { executeCustomCommand, isCustomCommandDisabled, renderCustomCommandIcon, } from "../../commands/customCommandConverter";
import { Wand2 } from "lucide-react";
/**
 * Default icon when no custom icon is provided
 */
function DefaultIcon({ className }) {
    return _jsx(Wand2, { className: className, strokeWidth: 1 });
}
/**
 * Toolbar section that displays custom command buttons configured in the backend.
 * Each button triggers a command handler registered in the EditorConfiguration.
 */
export function CustomCommandsToolbar() {
    const editContext = useEditContext();
    const canUseAi = useFeature(LicenseFeatures.AI);
    const [commands, setCommands] = useState([]);
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        if (!canUseAi) {
            setCommands([]);
            setLoading(false);
            return;
        }
        let mounted = true;
        async function fetchCommands() {
            try {
                const data = await loadCustomCommands("toolbar");
                if (mounted) {
                    setCommands(data);
                }
            }
            catch (error) {
                console.error("Failed to load custom toolbar commands:", error);
            }
            finally {
                if (mounted) {
                    setLoading(false);
                }
            }
        }
        fetchCommands();
        return () => {
            mounted = false;
        };
    }, [canUseAi]);
    if (!editContext || !canUseAi)
        return null;
    // Don't render anything while loading or if no commands configured
    if (loading || commands.length === 0) {
        return null;
    }
    const handleCommandClick = async (command) => {
        const context = {
            editContext,
            components: undefined, // Toolbar commands don't have component context
        };
        await executeCustomCommand(command, editContext.configuration, context);
    };
    const renderIcon = (command) => {
        return renderCustomCommandIcon(command, editContext.configuration, {
            svgClassName: "h-6 w-6 p-0.5",
            fallback: _jsx(DefaultIcon, { className: "text-neutral-grey-100 h-6 w-6 p-0.5" }),
        });
    };
    const isDisabled = (command) => {
        const context = {
            editContext,
            components: undefined,
        };
        return isCustomCommandDisabled(command, editContext.configuration, context);
    };
    return (_jsx(_Fragment, { children: commands.map((command) => (_jsx(SimpleIconButton, { icon: renderIcon(command), label: command.label, size: "large", "data-testid": `custom-command-${command.id}`, onClick: () => handleCommandClick(command), disabled: isDisabled(command) }, command.id))) }));
}
// Re-export with old name for backward compatibility
export { CustomCommandsToolbar as AgentCommandsToolbar };
//# sourceMappingURL=CustomCommandsToolbar.js.map