import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useBridgeWizardStore } from './bridgeWizardStore.js';
import { useChainConfig } from '../queries/chainConfig.js';
import { MultiSelect, Spinner } from '@inkjs/ui';
import { Box, Text } from 'ink';
import { useState } from 'react';
export const SelectChains = () => {
    const { wizardState, submitSelectChains } = useBridgeWizardStore();
    if (wizardState.stepId !== 'select-chains') {
        throw new Error('Invalid state');
    }
    const { data: chains, isLoading: isLoadingChains, error: loadChainsError, } = useChainConfig();
    const [errorMessage, setErrorMessage] = useState(null);
    if (isLoadingChains) {
        return (_jsx(Box, { flexDirection: "column", children: _jsx(Spinner, { label: `Loading chains from superchain registry for ${wizardState.network}...` }) }));
    }
    if (loadChainsError || !chains) {
        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "red", children: "\u274C Failed to load chains from superchain registry" }), _jsx(Text, { color: "red", children: loadChainsError?.toString() })] }));
    }
    if (chains.length === 0) {
        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { color: "yellow", children: "\u26A0\uFE0F No chains found" }) }));
    }
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["Select chains to bridge to", ' '] }), _jsx(Text, { color: "gray", children: "(" }), _jsx(Text, { color: "yellow", children: "\u2191\u2193" }), _jsx(Text, { color: "gray", children: " navigate - more below, " }), _jsx(Text, { color: "yellow", children: "space" }), _jsx(Text, { color: "gray", children: " select, " }), _jsx(Text, { color: "yellow", children: "enter" }), _jsx(Text, { color: "gray", children: " to confirm)" })] }), _jsx(MultiSelect, { options: chains
                    .filter(chain => chain.parent.chain === wizardState.network)
                    .map(chain => ({
                    label: `${chain.name} (${chain.chainId})`,
                    value: chain.chainId.toString(),
                })), onSubmit: chainIdStrs => {
                    if (chainIdStrs.length === 0) {
                        setErrorMessage('You must select at least one chain');
                        return;
                    }
                    submitSelectChains({
                        chainIds: chainIdStrs.map(Number),
                    });
                } }), errorMessage && _jsx(Text, { color: "red", children: errorMessage })] }));
};
