import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDeployCreate2WizardStore } from './deployCreate2WizardStore.js';
import { initChainConfig } from '../utils/superchainRegistry.js';
import { MultiSelect, Spinner } from '@inkjs/ui';
import { useQuery } from '@tanstack/react-query';
import { Box, Text } from 'ink';
import { useState } from 'react';
export const SelectChains = () => {
    const { wizardState, submitSelectChains } = useDeployCreate2WizardStore();
    const { data: chains, isLoading, error, } = useQuery({
        queryKey: ['init-chain-config'],
        queryFn: async () => {
            return await initChainConfig();
        },
    });
    const [errorMessage, setErrorMessage] = useState(null);
    if (wizardState.stepId !== 'select-chains') {
        throw new Error('Invalid step');
    }
    if (isLoading) {
        return (_jsx(Box, { flexDirection: "column", children: _jsx(Spinner, { label: "Loading chains from superchain registry..." }) }));
    }
    if (error || !chains) {
        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "red", children: "\u274C Failed to load chains from superchain registry" }), error && _jsx(Text, { children: error.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: [_jsx(Text, { color: "cyan", children: "Select chains to deploy to" }), _jsx(Text, { color: "gray", children: " (" }), _jsx(Text, { color: "yellow", children: "\u2191\u2193" }), _jsx(Text, { color: "gray", children: " to navigate, " }), _jsx(Text, { color: "yellow", children: "space" }), _jsx(Text, { color: "gray", children: " to select, " }), _jsx(Text, { color: "yellow", children: "enter" }), _jsx(Text, { color: "gray", children: " to confirm, more options available below " }), _jsx(Text, { color: "yellow", children: "\u2193" }), _jsx(Text, { color: "gray", children: ")" })] }), _jsx(MultiSelect, { options: chains
                    .filter(chain => chain.parent.chain === wizardState.network)
                    .map(chain => ({
                    label: chain.name,
                    value: chain.identifier.split('/')[1],
                })), onSubmit: chainNames => {
                    if (chainNames.length === 0) {
                        setErrorMessage('You must select at least one chain');
                        return;
                    }
                    submitSelectChains({ chainNames });
                } }), errorMessage && _jsx(Text, { color: "red", children: errorMessage })] }));
};
