import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useDeployCreate2WizardStore } from '../deployCreate2WizardStore.js';
import { rollupChainToIdentifier } from '../../../../util/chains/chainIdentifier.js';
import { networkByName } from '../../../../util/chains/networks.js';
import { MultiSelect } from '@inkjs/ui';
import { Box, Text } from 'ink';
import { useState } from 'react';
export const SelectChains = () => {
    const { wizardState, submitSelectChains } = useDeployCreate2WizardStore();
    const [errorMessage, setErrorMessage] = useState(null);
    if (wizardState.stepId !== 'select-chains') {
        throw new Error('Invalid state');
    }
    const network = networkByName[wizardState.network];
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["Select chains to deploy 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: network.chains.map(chain => ({
                    label: `${chain.name} (${chain.id})`,
                    value: rollupChainToIdentifier(chain).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 })] }));
};
