import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import * as React from 'react';
import { GenericWalletIcon } from '../../../../assets/genericWallet.mjs';
import { useCryptoButtonProps, isWalletVisible, WalletToText } from '../../../../utils/crypto.mjs';
import Button from '../../../components/atoms/Button.mjs';
import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
import { useGlobalReducer, useConfig, AppScreens } from '../../GlobalContextProvider.mjs';
import { Wallets } from '../../../../../../core/src/public/ui.mjs';

const MAX_BUTTONS = 6;
const walletMessages = {
    [Wallets.Phantom]: {
        id: "crypto.wallet.continueWithPhantom",
        message: "Continue with Phantom"
    },
    [Wallets.Binance]: {
        id: "crypto.wallet.continueWithBinance",
        message: "Continue with Binance"
    },
    [Wallets.Coinbase]: {
        id: "crypto.wallet.continueWithCoinbase",
        message: "Continue with Coinbase"
    },
    [Wallets.Metamask]: {
        id: "crypto.wallet.continueWithMetamask",
        message: "Continue with Metamask"
    },
    [Wallets.GenericEthereumWallet]: {
        id: "crypto.wallet.continueWithEthereum",
        message: "Continue with Other Ethereum Wallet"
    },
    [Wallets.GenericSolanaWallet]: {
        id: "crypto.wallet.continueWithSolana",
        message: "Continue with Other Solana Wallet"
    }
};
const CryptoWalletButtons = ({ type })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [state, dispatch] = useGlobalReducer();
    const config = useConfig();
    const { getIcon, getId } = useCryptoButtonProps();
    const oAuthOptions = config.oauthOptions?.providers.length ?? 0;
    // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)
    const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;
    const onWalletStart = (wallet)=>{
        dispatch({
            type: 'update_crypto_state',
            cryptoState: {
                ...state.formState.cryptoState,
                walletOption: wallet
            }
        });
        dispatch({
            type: 'transition',
            screen: AppScreens.CryptoConnect
        });
    };
    const allDetectedWallets = Object.keys(Wallets).filter((wallet)=>isWalletVisible(Wallets[wallet]));
    const renderOtherScreenButton = allDetectedWallets.length > cryptoButtonsOnMainScreen;
    const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);
    const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);
    const walletsToRender = type === 'main' ? mainWallets : otherWallet;
    return /*#__PURE__*/ React.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
        const walletEnum = Wallets[wallet];
        const Icon = getIcon(walletEnum);
        return /*#__PURE__*/ React.createElement(Button, {
            key: wallet,
            variant: "outline",
            icon: /*#__PURE__*/ React.createElement(Icon, null),
            onClick: ()=>onWalletStart(walletEnum),
            id: getId(walletEnum)
        }, type === 'main' ? $__i18n._(walletMessages[walletEnum]) : $__i18n._(WalletToText[walletEnum]));
    }), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React.createElement(Button, {
        variant: "outline",
        icon: /*#__PURE__*/ React.createElement(GenericWalletIcon, null),
        onClick: ()=>dispatch({
                type: 'transition',
                screen: AppScreens.CryptoOtherScreen
            }),
        id: getId(Wallets.GenericEthereumWallet)
    }, $__i18n._({
        id: "crypto.wallet.continueWithOtherWallet",
        message: "Continue with other Crypto Wallet"
    })) : /*#__PURE__*/ React.createElement(Button, {
        variant: "outline",
        onClick: ()=>dispatch({
                type: 'transition',
                screen: AppScreens.CryptoSetupWallet
            })
    }, $__i18n._({
        id: "crypto.wallet.setupNewWallet",
        message: "Set up a new crypto wallet"
    })));
};

export { CryptoWalletButtons };
//# sourceMappingURL=WalletButtons.mjs.map
