import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import cn from "classnames";
import { Row, Box } from "../../../components/grid";
import TextBase from "../../../components/text";
import { coinToIcon } from "../util";
import { safeToFixed } from "../../../utils/format";
import { t } from "ttag";
import { Wrapper, WalletBalance } from "./styled";
import { useFixedTooltip } from "../../fixedTooltip";
const Wallet = ({ loader, additional, balance, icons, convert, onSwitch, isZeroBalanceHidden, toggleZeroBalanceHide, isTokenClickable = true, }) => {
    const { onElementEnter, onElementLeave, TooltipComponent } = useFixedTooltip();
    const [tooltipChild, setTooltipChild] = useState(null);
    const onEnter = (e, v) => {
        if (v && v !== "0" && v !== "0$") {
            onElementEnter(e);
            setTooltipChild(v);
        }
    };
    const onLeave = () => {
        onElementLeave();
        setTooltipChild(null);
    };
    return (_jsxs(Wrapper, { children: [_jsx(TooltipComponent, { offsetX: -38, offsetY: -60, children: tooltipChild }), additional && (_jsxs(_Fragment, { children: [_jsx(Box, { pl: "16px", pt: "16px", pb: "3px", children: _jsx(TextBase.F2, { children: t `${additional.name} balance` }) }), Object.entries(additional.balance ?? {}).map(([curr, amount]) => (_jsxs(Row, { alignItems: "center", className: cn("token", "token-icon"), children: [additional.icons?.[curr] ?? coinToIcon["Dot"], _jsx(TextBase.F2, { className: "name", children: curr }), _jsx(TextBase.F2, { className: "amount", children: safeToFixed(amount, 4, true) ?? "0" })] }, curr)))] })), _jsxs(WalletBalance, { className: "wallet-balance", children: [_jsx(TextBase.F2, { className: "wallet-balance__text", children: t `Wallet balance` }), !!toggleZeroBalanceHide && (_jsx(TextBase.F2, { onClick: toggleZeroBalanceHide, className: "button__hide", primary: true, children: t `${isZeroBalanceHidden ? t `Show` : t `Hide`} zero balances` }))] }), _jsx("div", { className: "balances", children: balance &&
                    Object.entries(balance).map(([curr, amount]) => {
                        const loading = !amount?.isFinite();
                        const amountLabel = safeToFixed(amount, 2, true);
                        const amountTooltip = safeToFixed(amount, 10, true);
                        const amountUSD = convert(amount, curr, "Usd");
                        const amountLabelUSD = `${safeToFixed(amountUSD, 2, true)}$`;
                        return (_jsxs(Row, { alignItems: "center", className: cn("token", "token-icon"), onClick: () => {
                                if (isTokenClickable === false)
                                    return;
                                onSwitch(curr);
                            }, children: [_jsxs("div", { className: "token-name", children: [icons?.[curr] ?? coinToIcon[curr], _jsx(TextBase.F2, { className: "name", children: curr })] }), loading ? (loader ?? _jsx("div", {})) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "token-amount", onMouseEnter: (e) => onEnter(e, amountTooltip), onMouseLeave: onLeave, children: _jsx(TextBase.F2, { className: "amount", children: amountLabel }) }), _jsx("div", { className: "token-price", children: _jsx(TextBase.F2, { className: "value", children: amountLabelUSD }) })] }))] }, curr));
                    }) })] }));
};
export default Wallet;
//# sourceMappingURL=index.js.map