import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
/**
 * @license
 * Copyright 2025 Vybestack LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import { useCallback } from 'react';
import { Box, Text } from 'ink';
import { DebugLogger } from '@vybestack/llxprt-code-core';
import { Colors } from '../../colors.js';
import { RadioButtonSelect } from '../shared/RadioButtonSelect.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import { PROVIDER_OPTIONS } from './constants.js';
import { getStepPosition } from './utils.js';
const logger = new DebugLogger('llxprt:ui:profilewizard');
export const ProviderSelectStep = ({ state, onUpdateProvider, onCancel, availableProviders, }) => {
    // Handle Escape key to cancel
    useKeypress((key) => {
        if (key.name === 'escape') {
            onCancel();
        }
    }, { isActive: true });
    const handleProviderSelect = useCallback((value) => {
        // Debug: show provider value
        logger.debug(() => `Provider selected: "${value}"`);
        // Update provider - navigation is handled by parent based on new value
        onUpdateProvider(value);
    }, [onUpdateProvider]);
    // Use available providers from runtime if provided, otherwise fall back to static list
    const providers = availableProviders || PROVIDER_OPTIONS.map((p) => p.value);
    // Build items list with labels from PROVIDER_OPTIONS where available
    const providerItems = providers.map((providerValue) => {
        const option = PROVIDER_OPTIONS.find((p) => p.value === providerValue);
        return {
            label: option?.label || providerValue,
            value: providerValue,
            key: providerValue,
        };
    });
    const selectedProvider = state.config.provider || undefined;
    const initialIndex = selectedProvider
        ? providerItems.findIndex((p) => p.value === selectedProvider)
        : undefined;
    const { current, total } = getStepPosition(state);
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: Colors.AccentCyan, children: ["Create New Profile - Step ", current, " of ", total] }), _jsx(Text, { color: Colors.Foreground, children: " " }), _jsx(Text, { color: Colors.Foreground, children: "Select AI Provider:" }), _jsx(Text, { color: Colors.Gray, children: "Choose the AI provider you want to use for this profile." }), _jsx(Text, { color: Colors.Foreground, children: " " }), _jsx(RadioButtonSelect, { items: providerItems, initialIndex: initialIndex, onSelect: handleProviderSelect, isFocused: true }), _jsx(Text, { color: Colors.Foreground, children: " " }), _jsx(Text, { color: Colors.Gray, children: "Esc Cancel" })] }));
};
//# sourceMappingURL=ProviderSelectStep.js.map