import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { Settings } from 'lucide-react';
import { useConfig, useModels } from '../../hooks/useConfig';
export function ConfigSelector({ agent, provider, model, onAgentChange, onProviderChange, onModelChange, }) {
    const { data: config, isLoading: configLoading } = useConfig();
    const { data: modelsData, isLoading: modelsLoading } = useModels(provider);
    console.log('ConfigSelector rendered', {
        config,
        configLoading,
        agent,
        provider,
        model,
    });
    // Set defaults when config loads
    useEffect(() => {
        if (config && !agent && !provider && !model) {
            onAgentChange(config.defaults.agent);
            onProviderChange(config.defaults.provider);
            onModelChange(config.defaults.model);
        }
    }, [
        config,
        agent,
        provider,
        model,
        onAgentChange,
        onProviderChange,
        onModelChange,
    ]);
    // Update model when provider changes
    useEffect(() => {
        if (modelsData && modelsData.models.length > 0) {
            const currentModelExists = modelsData.models.some((m) => m.id === model);
            if (!currentModelExists) {
                onModelChange(modelsData.default || modelsData.models[0].id);
            }
        }
    }, [modelsData, model, onModelChange]);
    if (configLoading) {
        return (_jsxs("div", { className: "flex items-center gap-2 px-4 py-2 border-t border-border bg-background/50", children: [_jsx(Settings, { className: "h-4 w-4 text-muted-foreground animate-spin" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Loading config..." })] }));
    }
    if (!config)
        return null;
    return (_jsx("div", { className: "absolute bottom-24 left-0 right-0 pb-2 px-4 pointer-events-none z-40", children: _jsx("div", { className: "max-w-3xl mx-auto pointer-events-auto", children: _jsxs("div", { className: "flex items-center gap-2 px-4 py-2 border border-border bg-background/95 backdrop-blur-sm rounded-lg", children: [_jsx(Settings, { className: "h-4 w-4 text-muted-foreground" }), _jsx("select", { value: agent, onChange: (e) => onAgentChange(e.target.value), className: "text-xs bg-background border border-border rounded px-2 py-1 outline-none", children: config.agents.map((a) => (_jsx("option", { value: a, children: a }, a))) }), _jsx("select", { value: provider, onChange: (e) => onProviderChange(e.target.value), className: "text-xs bg-background border border-border rounded px-2 py-1 outline-none", children: config.providers.map((p) => (_jsx("option", { value: p, children: p }, p))) }), _jsx("select", { value: model, onChange: (e) => onModelChange(e.target.value), disabled: modelsLoading || !modelsData, className: "text-xs bg-background border border-border rounded px-2 py-1 outline-none disabled:opacity-50", children: modelsData?.models.map((m) => (_jsx("option", { value: m.id, children: m.label }, m.id))) })] }) }) }));
}
//# sourceMappingURL=ConfigSelector.js.map