import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { t } from "ttag";
import { currentTheme } from "../../theme";
import { Row, Box } from "../grid";
import Text from "../text";
import { Indicator } from "../indicator";
import Icons from "../icons";
import { Assets } from "./assets";
import { Wrapper, Heading, Body, Tabs, Tab, PairRow } from "./styled";
import { safeToFixed } from "../../utils/format";
// TODO: is this component going to be general?
var TabType;
(function (TabType) {
    TabType[TabType["All"] = 0] = "All";
    TabType[TabType["Top15"] = 1] = "Top15";
    TabType[TabType["Stable"] = 2] = "Stable";
    TabType[TabType["Favorite"] = 3] = "Favorite";
})(TabType || (TabType = {}));
// Note: this is not the same as currency list in Gateway app
const PairSelector = ({ asset, useAssets, onAssetChange }) => {
    const [opened, setOpened] = React.useState(false);
    const [tab, setTab] = React.useState(TabType.All);
    const assets = useAssets();
    return (_jsxs(Wrapper, { children: [_jsxs(Heading, { onClick: () => setOpened(!opened), children: [_jsxs(Row, { alignItems: "center", className: "row-fix", children: [Assets[asset]?.icon, _jsx(Box, { ml: "9px", children: _jsxs(Text.F1, { lineHeight: 18, fontFamily: "Bold", children: [asset.toUpperCase(), " / USD"] }) })] }), _jsxs(Row, { alignItems: "center", className: "row-fix", children: [_jsx(Text.F1, { lineHeight: 20, fontFamily: "Bold", color: currentTheme.colors.secondary, children: t `All markets` }), _jsx(Box, { ml: "4px", children: _jsx(Indicator, { opened: opened, width: "13", height: "12", viewBox: "0 0 10 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: currentTheme.colors.secondary, children: _jsx(Icons.Arrow, { color: currentTheme.colors.secondary }) }) })] })] }), _jsx(Body, { className: opened ? "opened" : "", children: opened ? (_jsxs(_Fragment, { children: [_jsxs(Tabs, { children: [_jsx(Tab, { className: tab === TabType.All ? "active" : "", onClick: () => setTab(TabType.All), children: _jsx("p", { children: t `All` }) }), _jsx(Tab, { className: tab === TabType.Top15 ? "active" : "", onClick: () => setTab(TabType.Top15), children: _jsx("p", { children: t `Top 15` }) }), _jsx(Tab, { className: tab === TabType.Stable ? "active" : "", onClick: () => setTab(TabType.Stable), children: _jsx("p", { children: t `Stable` }) }), _jsx(Tab, { className: tab === TabType.Favorite ? "active" : "", onClick: () => setTab(TabType.Favorite), children: _jsx("p", { children: t `Favorite` }) })] }), assets?.map((a, i, rows) => {
                            return (_jsx(Box, { pl: "20px", pr: "20px", children: _jsxs(PairRow, { onClick: () => {
                                        onAssetChange(a.asset);
                                        setOpened(false);
                                    }, className: i === rows.length - 1 ? "last" : "", children: [_jsxs(Row, { className: "row-fix", alignItems: "center", children: [a.icon, _jsxs(Box, { ml: "9px", children: [_jsxs(Text.F1, { lineHeight: 18, fontFamily: "Bold", children: [a.asset.toUpperCase(), " / USD"] }), _jsx(Text.F3, { lineHeight: 13, fontFamily: "Bold", color: "#C4C4C4", children: a.chainsName })] })] }), _jsxs("div", { children: [_jsx(Text.F1, { lineHeight: 18, fontFamily: "Bold", textAlign: "right", children: !!a.currentPrice ?
                                                        `$ ${safeToFixed(a.currentPrice, 2, true)}` :
                                                        "-" }), _jsx(Row, { alignItems: "center", className: "row-fix", children: !!a.priceChange && !!a.priceChangePrc ? (_jsxs(_Fragment, { children: [_jsx(Indicator, { opened: !a.priceChange.isNegative(), width: "10", height: "9", viewBox: "0 0 10 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx(Icons.Arrow, { color: a.priceChange.isNegative() ? "#EB5757" : "#55AE58" }) }), _jsx(Box, { ml: "2px", children: _jsxs(Text.F3, { lineHeight: 13, fontFamily: "Bold", color: a.priceChange?.isNegative() ? "#EB5757" : "#55AE58", children: [safeToFixed(a.priceChange.abs(), 2, true), " (", safeToFixed(a.priceChangePrc.abs(), 2, false), ")"] }) })] })) : null })] })] }) }));
                        })] })) : null })] }));
};
export default PairSelector;
//# sourceMappingURL=index.js.map