import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Skeleton } from '@mui/material';
import { useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useChain, useSwapOnly, useToken } from '../../hooks';
import { FormKeyHelper, useWidgetConfig } from '../../providers';
import { navigationRoutes } from '../../utils';
import { Card, CardTitle } from '../Card';
import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
import { SelectTokenCardHeader } from './SelectTokenButton.style';
import { AmountInput } from '../../components/AmountInput';
export const SelectTokenButton = ({ formType, compact }) => {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const { disabledUI, subvariant } = useWidgetConfig();
    const swapOnly = useSwapOnly();
    const tokenKey = FormKeyHelper.getTokenKey(formType);
    const [chainId, tokenAddress] = useWatch({
        name: [FormKeyHelper.getChainKey(formType), tokenKey],
    });
    const { chain, isLoading: isChainLoading } = useChain(chainId);
    const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
    const handleClick = () => {
        navigate(formType === 'from'
            ? navigationRoutes.fromToken
            : subvariant === 'refuel'
                ? navigationRoutes.toTokenNative
                : navigationRoutes.toToken);
    };
    const isSelected = !!(chain && token);
    const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
    const defaultPlaceholder = formType === 'to' && subvariant === 'refuel'
        ? t('main.selectChain')
        : formType === 'to' && swapOnly
            ? t('main.selectToken')
            : t('main.selectChainAndToken');
    const cardTitle = formType === 'from' && subvariant === 'nft'
        ? t(`header.payWith`)
        : t(`main.${formType}`);
    return (_jsxs(Card, { flex: 1, style: {
            border: 'none',
            background: 'none'
        }, children: [_jsx(CardTitle, { children: cardTitle }), _jsxs("div", { className: "flex", children: [formType === 'from' ?
                        (_jsx(AmountInput, { formType: "from", mx: 3, mb: 2 }))
                        :
                            (_jsx("div", { style: {
                                    display: 'block',
                                    width: '300px'
                                } })), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { className: "text-black arial flex gap-1 cursor-pointer font-bold items-center mr-1 text-lg sm:text-2xl bg-white rounded-full py-0 px-3 w-fit", style: {
                            maxHeight: '56px'
                        }, avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsxs("div", { onClick: onClick, className: "text-black arial flex gap-1 cursor-pointer font-bold items-center mr-1 text-lg sm:text-2xl bg-white rounded-full py-0 px-3 w-fit", style: {
                            maxHeight: '56px',
                            marginRight: '16px'
                        }, children: [_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`main.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "w-5 h-5 opacity-60", viewBox: "0 0 12 7", children: _jsx("path", { stroke: "#000", d: "M.972 1l5.233 5 5.234-5" }) })] }))] })] }));
};
