import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from "classnames";
import React from "react";
import { useTheme } from "styled-components";
import { t } from "ttag";
import { safeToFixed } from "../../../../utils/format";
import { Col } from "../../../grid";
import Text from "../../../text";
import { Tabs as Wrapper, Tab } from "../tabs";
const NavBalance = ({ balances, onSwitch }) => {
    const [tab, setTab] = React.useState(-1);
    const theme = useTheme();
    const width = React.useMemo(() => {
        const PADDING = 4;
        const num = balances?.length ?? 0;
        const percent = (100 / num).toFixed(2) + "%";
        return `calc(${percent} - ${PADDING / 2}px)`;
    }, [balances?.length]);
    const select = React.useCallback((i) => () => {
        setTab((tab) => (tab === i ? -1 : i));
    }, []);
    React.useEffect(() => {
        onSwitch?.(tab);
    }, [onSwitch, tab]);
    return (_jsx(Wrapper, { className: "ui-nav-balance", width: "308px", children: balances?.map(({ name, title, balance }, i) => (_jsx(Col, { width: width, children: _jsxs(Tab, { className: cn("ui-nav-balance__tab", {
                    "ui-nav-tabs__tab--active": tab === i,
                }), onClick: select(i), children: [_jsx(Text.F3, { color: tab === i ? "#FFFFFF" : theme.colors?.secondary, lineHeight: theme.dex?.navBalance?.tabLabelLineHeight ?? 12, fontFamily: "Bold", children: t `${title} balance` }), _jsxs(Text.F1, { color: tab === i ? "#FFFFFF" : theme.colors?.secondary, lineHeight: theme.dex?.navBalance?.tabTextLineHeight ?? 20, fontFamily: "Bold", children: ["$ ", safeToFixed(balance, 2, true)] })] }) }, `${name}-${i}`))) }));
};
export default NavBalance;
//# sourceMappingURL=index.js.map