import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { useConfig } from '../../hooks/useConfig';
import { usePreferences } from '../../hooks/usePreferences';
import { Modal } from '../ui/Modal';
import { UnifiedModelSelector, } from './UnifiedModelSelector';
import { UnifiedAgentSelector, } from './UnifiedAgentSelector';
export function ConfigModal({ isOpen, onClose, initialFocus, chatInputRef, agent, provider, model, modelSupportsReasoning, onAgentChange, onProviderChange, onModelChange, onModelSelectorChange, }) {
    const { data: config, isLoading: configLoading } = useConfig();
    const { preferences, updatePreferences } = usePreferences();
    const agentSelectorRef = useRef(null);
    const modelSelectorRef = useRef(null);
    useEffect(() => {
        if (isOpen && initialFocus) {
            setTimeout(() => {
                if (initialFocus === 'agent') {
                    agentSelectorRef.current?.openAndFocus();
                }
                else if (initialFocus === 'model') {
                    modelSelectorRef.current?.openAndFocus();
                }
            }, 100);
        }
    }, [isOpen, initialFocus]);
    const handleClose = () => {
        onClose();
        // Focus chat input after modal closes
        setTimeout(() => {
            chatInputRef?.current?.focus();
        }, 100);
    };
    const handleModelChange = (selectedProvider, selectedModel) => {
        if (onModelSelectorChange) {
            onModelSelectorChange(selectedProvider, selectedModel);
        }
        else {
            onProviderChange(selectedProvider);
            onModelChange(selectedModel);
        }
    };
    return (_jsx(Modal, { isOpen: isOpen, onClose: handleClose, title: "Configuration", closeOnEscape: true, closeOnBackdropClick: true, children: configLoading ? (_jsx("div", { className: "text-center text-muted-foreground py-8", children: "Loading configuration..." })) : config ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "block text-sm font-medium text-foreground mb-2", children: "Agent" }), _jsx(UnifiedAgentSelector, { ref: agentSelectorRef, agent: agent, agents: config.agents, onChange: onAgentChange })] }), _jsxs("div", { children: [_jsx("div", { className: "block text-sm font-medium text-foreground mb-2", children: "Provider / Model" }), _jsx(UnifiedModelSelector, { ref: modelSelectorRef, provider: provider, model: model, onChange: handleModelChange })] }), modelSupportsReasoning && (_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: "Extended Thinking" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Enable reasoning for deeper analysis" })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": preferences.reasoningEnabled, onClick: () => updatePreferences({
                                reasoningEnabled: !preferences.reasoningEnabled,
                            }), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${preferences.reasoningEnabled ? 'bg-primary' : 'bg-muted'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full transition-transform ${preferences.reasoningEnabled
                                    ? 'translate-x-6'
                                    : 'translate-x-1'} ${preferences.reasoningEnabled ? 'bg-primary-foreground' : 'bg-foreground'}` }) })] }))] })) : null }));
}
//# sourceMappingURL=ConfigModal.js.map