import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Table } from "../../../table";
import { useContext, useMemo, useRef } from "react";
import { Numeral, Text } from "../../../text";
import { PositionsRowProvider } from "./positionRowContext";
import { PriceInput } from "./priceInput";
import { CloseButton } from "./closeButton";
import { SymbolProvider } from "../../../provider";
import { QuantityInput } from "./quantityInput";
import { NumeralWithCtx } from "../../../text/numeralWithCtx";
import { TabContext } from "../../../tab";
import { useTabContext } from "../../../tab/tabContext";
import { Divider } from "../../../divider";
import { UnrealizedPnLPopoverCard } from "./unrealPnLHover";
import { PositionEmptyView } from "./positionEmptyView";
import { SharePnLIcon } from "../../../block/shared/sharePnLIcon";
import { TPSLButton } from "./tpslButton";
import { TriggerPrice } from "./triggerPrice";
export const Listview = (props)=>{
    const { height } = useContext(TabContext);
    // const { footerHeight } = useContext(LayoutContext);
    const { data: { pnlNotionalDecimalPrecision } } = useTabContext();
    const columns = useMemo(()=>{
        return [
            {
                title: "Instrument",
                dataIndex: "symbol",
                className: "orderly-h-[48px]",
                fixed: "left",
                width: 120,
                onSort: (r1, r2, sortOrder)=>{
                    if (sortOrder === "asc") {
                        return r1.symbol.localeCompare(r2.symbol);
                    }
                    return r2.symbol.localeCompare(r1.symbol);
                },
                render: (value)=>/*#__PURE__*/ _jsx(Text, {
                        rule: "symbol",
                        className: "orderly-font-semibold orderly-cursor-pointer",
                        onClick: (e)=>{
                            props.onSymbolChange?.({
                                symbol: value
                            });
                            e.stopPropagation();
                            e.preventDefault();
                        },
                        children: value
                    })
            },
            {
                title: "Quantity",
                className: "orderly-h-[48px]",
                dataIndex: "position_qty",
                onSort: true,
                width: 100,
                render: (value)=>/*#__PURE__*/ _jsx(NumeralWithCtx, {
                        coloring: true,
                        className: "orderly-font-semibold",
                        tick: "base_dp",
                        children: value
                    })
            },
            {
                title: "Avg. open",
                className: "orderly-h-[48px]",
                width: 120,
                onSort: true,
                dataIndex: "average_open_price",
                render: (value)=>/*#__PURE__*/ _jsx(NumeralWithCtx, {
                        children: value
                    })
            },
            {
                title: "Mark price",
                dataIndex: "mark_price",
                width: 120,
                onSort: true,
                className: "orderly-h-[48px]",
                render: (value)=>{
                    return /*#__PURE__*/ _jsx(NumeralWithCtx, {
                        className: "orderly-font-semibold",
                        children: value
                    });
                }
            },
            {
                title: "Liq. price",
                width: 100,
                onSort: true,
                className: "orderly-h-[48px]",
                hint: "Estimated price at which your position will be liquidated. Prices are estimated and depend on multiple factors across all positions.",
                dataIndex: "est_liq_price",
                render: (value)=>{
                    return Number(value) === 0 ? "--" : /*#__PURE__*/ _jsx(NumeralWithCtx, {
                        className: "orderly-text-warning orderly-font-semibold",
                        children: value
                    });
                }
            },
            {
                title: "Unreal. PnL",
                className: "orderly-h-[48px]",
                dataIndex: "unrealized_pnl",
                width: 150,
                onSort: true,
                hint: /*#__PURE__*/ _jsx(UnrealizedPnLPopoverCard, {
                    unPnlPriceBasis: props.unPnlPriceBasis,
                    setUnPnlPriceBasic: props.setUnPnlPriceBasic
                }),
                render: (value, record)=>{
                    return /*#__PURE__*/ _jsxs("span", {
                        children: [
                            /*#__PURE__*/ _jsx(Numeral, {
                                precision: pnlNotionalDecimalPrecision,
                                coloring: true,
                                className: "orderly-font-semibold",
                                children: value
                            }),
                            /*#__PURE__*/ _jsx(Numeral, {
                                rule: "percentages",
                                precision: pnlNotionalDecimalPrecision,
                                coloring: true,
                                className: "orderly-font-semibold",
                                prefix: "(",
                                surfix: ")",
                                children: record.unrealized_pnl_ROI
                            }),
                            /*#__PURE__*/ _jsx(SharePnLIcon, {
                                className: "orderly-ml-2",
                                position: record
                            })
                        ]
                    });
                }
            },
            {
                title: "TP/SL",
                className: "orderly-h-[48px]",
                dataIndex: "__",
                width: 150,
                render: (_, record)=>/*#__PURE__*/ _jsx(TriggerPrice, {
                        stopLossPrice: record.sl_trigger_price,
                        takeProfitPrice: record.tp_trigger_price
                    })
            },
            {
                title: "Est. total",
                dataIndex: "notional",
                className: "orderly-h-[48px]",
                width: 100,
                onSort: true,
                render: (value)=>/*#__PURE__*/ _jsx(Numeral, {
                        precision: pnlNotionalDecimalPrecision,
                        className: "orderly-font-semibold",
                        children: value
                    })
            },
            {
                title: "Margin",
                className: "orderly-h-[48px]",
                dataIndex: "mm",
                onSort: true,
                width: 100,
                render: (value)=>/*#__PURE__*/ _jsx(Numeral, {
                        className: "orderly-font-semibold",
                        children: value
                    }),
                hint: /*#__PURE__*/ _jsxs("div", {
                    children: [
                        /*#__PURE__*/ _jsx("span", {
                            children: "The minimum equity to keep your position. "
                        }),
                        /*#__PURE__*/ _jsx(Divider, {
                            className: "orderly-py-2 orderly-border-white/10"
                        }),
                        /*#__PURE__*/ _jsx("span", {
                            children: "Margin = Position size * Mark price * MMR"
                        })
                    ]
                }),
                hintClassName: "orderly-p-2"
            },
            {
                title: "Qty.",
                dataIndex: "close_qty",
                className: "orderly-h-[48px]",
                width: 100,
                fixed: "right",
                render: (value)=>{
                    return /*#__PURE__*/ _jsx(QuantityInput, {});
                }
            },
            {
                title: "Price",
                dataIndex: "close_price",
                width: 100,
                fixed: "right",
                className: "orderly-w-[100px] orderly-h-[48px]",
                render: (value)=>/*#__PURE__*/ _jsx(PriceInput, {})
            },
            {
                title: "",
                dataIndex: "close_position",
                align: "right",
                width: 160,
                fixed: "right",
                className: "orderly-h-[48px]",
                render: (value)=>{
                    return /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-space-x-2",
                        children: [
                            /*#__PURE__*/ _jsx(CloseButton, {}),
                            /*#__PURE__*/ _jsx(TPSLButton, {})
                        ]
                    });
                }
            }
        ];
    }, [
        pnlNotionalDecimalPrecision,
        props.unPnlPriceBasis
    ]);
    const divRef = useRef(null);
    return /*#__PURE__*/ _jsxs("div", {
        ref: divRef,
        // className="orderly-overflow-y-auto"
        className: "orderly-relative",
        style: {
            height: `${(height?.content ?? 100) - 68}px`
        },
        children: [
            /*#__PURE__*/ _jsx(Table, {
                id: "orderly-desktop-positions-content",
                bordered: true,
                justified: true,
                showMaskElement: false,
                columns: columns,
                dataSource: props.dataSource,
                headerClassName: "orderly-text-2xs orderly-text-base-contrast-54 orderly-py-3 orderly-bg-base-900",
                className: "orderly-text-2xs orderly-text-base-contrast-80",
                generatedRowKey: (record)=>record.symbol,
                renderRowContainer: (record, index, children)=>{
                    return /*#__PURE__*/ _jsx(SymbolProvider, {
                        symbol: record.symbol,
                        children: /*#__PURE__*/ _jsx(PositionsRowProvider, {
                            position: record,
                            children: children
                        })
                    });
                }
            }),
            (!props.dataSource || props.dataSource.length <= 0) && /*#__PURE__*/ _jsx(PositionEmptyView, {
                watchRef: divRef,
                left: 120,
                right: 280
            })
        ]
    });
};

//# sourceMappingURL=listview.js.map