import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Button from "../../button";
import { NetworkImage } from "../../icon";
import { Statistic } from "../../statistic";
import { useContext } from "react";
import { Numeral, Text } from "../../text";
import { SymbolContext } from "../../provider";
import { cn } from "../../utils/css";
import { SharePnLIcon } from "../shared/sharePnLIcon";
export const PositionCell = (props)=>{
    const { item } = props;
    const { quote, quote_dp, base, base_dp } = useContext(SymbolContext);
    const onSymbol = ()=>{
        props.onSymbolChange?.({
            symbol: item.symbol
        });
        // go to the top of page
        window.scrollTo(0, 0);
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-px-4",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-py-2",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-flex-1",
                        children: /*#__PURE__*/ _jsxs("div", {
                            className: "orderly-flex orderly-items-center orderly-space-x-2",
                            children: [
                                /*#__PURE__*/ _jsx(NetworkImage, {
                                    type: "symbol",
                                    symbol: item.symbol,
                                    size: "small"
                                }),
                                /*#__PURE__*/ _jsx(Text, {
                                    rule: "symbol",
                                    onClick: onSymbol,
                                    className: "orderly-text-3xs",
                                    children: item.symbol
                                })
                            ]
                        })
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        labelClassName: "orderly-text-4xs",
                        label: /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-36",
                                    children: "Unreal. PnL"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-20",
                                    children: "(USDC)"
                                })
                            ]
                        }),
                        value: /*#__PURE__*/ _jsxs("div", {
                            className: cn("orderly-flex orderly-justify-end orderly-text-3xs orderly-items-center", item["unrealized_pnl"] > 0 ? "orderly-text-trade-profit" : item["unrealized_pnl"] < 0 ? "orderly-text-trade-loss" : "orderly-text-base-contrast/50"),
                            children: [
                                /*#__PURE__*/ _jsx(Numeral, {
                                    children: item["unrealized_pnl"]
                                }),
                                /*#__PURE__*/ _jsx(Numeral, {
                                    rule: "percentages",
                                    prefix: "(",
                                    surfix: ")",
                                    className: "orderly-text-4xs",
                                    children: item.unrealized_pnl_ROI
                                }),
                                /*#__PURE__*/ _jsx(SharePnLIcon, {
                                    className: "orderly-ml-2",
                                    position: item
                                })
                            ]
                        }),
                        rule: "price",
                        coloring: true,
                        align: "right"
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-grid orderly-grid-cols-3 orderly-gap-2",
                children: [
                    /*#__PURE__*/ _jsx(Statistic, {
                        label: "Qty.",
                        labelClassName: "orderly-text-4xs orderly-text-base-contrast-36",
                        valueClassName: "orderly-text-3xs",
                        value: item["position_qty"],
                        coloring: true,
                        rule: "price",
                        precision: base_dp
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        rule: "price",
                        labelClassName: "orderly-text-4xs",
                        valueClassName: "orderly-text-3xs",
                        label: /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-36",
                                    children: "Margin"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-20",
                                    children: "(USDC)"
                                })
                            ]
                        }),
                        value: item["mm"]
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        labelClassName: "orderly-text-4xs",
                        valueClassName: "orderly-text-3xs",
                        label: /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-36",
                                    children: "Notional"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-20",
                                    children: "(USDC)"
                                })
                            ]
                        }),
                        rule: "price",
                        precision: base_dp,
                        value: item["notional"],
                        align: "right"
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        labelClassName: "orderly-text-4xs",
                        valueClassName: "orderly-text-3xs",
                        label: /*#__PURE__*/ _jsx(_Fragment, {
                            children: /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-36",
                                children: "Avg. open"
                            })
                        }),
                        rule: "price",
                        precision: quote_dp,
                        value: item["average_open_price"]
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        labelClassName: "orderly-text-4xs",
                        valueClassName: "orderly-text-3xs",
                        label: /*#__PURE__*/ _jsx(_Fragment, {
                            children: /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-36",
                                children: "Mark price"
                            })
                        }),
                        rule: "price",
                        precision: quote_dp,
                        value: item["mark_price"]
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        labelClassName: "orderly-text-4xs",
                        label: /*#__PURE__*/ _jsx(_Fragment, {
                            children: /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-36",
                                children: "Liq. price"
                            })
                        }),
                        valueClassName: "orderly-text-warning orderly-text-3xs",
                        value: item["est_liq_price"] === 0 ? "--" : item["est_liq_price"],
                        align: "right",
                        rule: "price",
                        precision: quote_dp
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-justify-end orderly-items-center orderly-gap-2 orderly-py-2",
                children: [
                    /*#__PURE__*/ _jsx(Button, {
                        id: "orderly-position-cell-limit-close-button",
                        variant: "outlined",
                        size: "small",
                        color: "tertiary",
                        onClick: ()=>props.onLimitClose?.(props.item),
                        className: "orderly-w-[120px] orderly-h-[28px] orderly-text-base-contrast-54 orderly-text-4xs",
                        children: "Limit close"
                    }),
                    /*#__PURE__*/ _jsx(Button, {
                        id: "orderly-position-cell-mark-close-button",
                        variant: "outlined",
                        size: "small",
                        color: "tertiary",
                        onClick: ()=>props.onMarketClose?.(props.item),
                        className: "orderly-w-[120px] orderly-h-[28px] orderly-text-base-contrast-54 orderly-text-4xs",
                        children: "Market close"
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=cell.js.map