"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectTokenButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_hook_form_1 = require("react-hook-form");
const react_i18next_1 = require("react-i18next");
const react_router_dom_1 = require("react-router-dom");
const hooks_1 = require("../../hooks");
const providers_1 = require("../../providers");
const utils_1 = require("../../utils");
const Card_1 = require("../Card");
const TokenAvatar_1 = require("../TokenAvatar");
const SelectTokenButton_style_1 = require("./SelectTokenButton.style");
const AmountInput_1 = require("../../components/AmountInput");
const SelectTokenButton = ({ formType, compact }) => {
    const { t } = (0, react_i18next_1.useTranslation)();
    const navigate = (0, react_router_dom_1.useNavigate)();
    const { disabledUI, subvariant } = (0, providers_1.useWidgetConfig)();
    const swapOnly = (0, hooks_1.useSwapOnly)();
    const tokenKey = providers_1.FormKeyHelper.getTokenKey(formType);
    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
        name: [providers_1.FormKeyHelper.getChainKey(formType), tokenKey],
    });
    const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(chainId);
    const { token, isLoading: isTokenLoading } = (0, hooks_1.useToken)(chainId, tokenAddress);
    const handleClick = () => {
        navigate(formType === 'from'
            ? utils_1.navigationRoutes.fromToken
            : subvariant === 'refuel'
                ? utils_1.navigationRoutes.toTokenNative
                : utils_1.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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, style: {
            border: 'none',
            background: 'none'
        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "flex", children: [formType === 'from' ?
                        ((0, jsx_runtime_1.jsx)(AmountInput_1.AmountInput, { formType: "from", mx: 3, mb: 2 }))
                        :
                            ((0, jsx_runtime_1.jsx)("div", { style: {
                                    display: 'block',
                                    width: '300px'
                                } })), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.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: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`main.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "w-5 h-5 opacity-60", viewBox: "0 0 12 7", children: (0, jsx_runtime_1.jsx)("path", { stroke: "#000", d: "M.972 1l5.233 5 5.234-5" }) })] }))] })] }));
};
exports.SelectTokenButton = SelectTokenButton;
