import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, useRef } from "react";
import { Table } from "../../../table";
import { OrderStatus, OrderSide, OrderType } from "@orderly.network/types";
import { cx } from "class-variance-authority";
import { upperCaseFirstLetter } from "../../../utils/string";
import { SymbolProvider } from "../../../provider";
import { cn } from "../../../utils";
import { columnsBasis } from "../../../block/orders/columnsUtil";
import { OrderTrades } from "../orderTrades";
import { useTabContext } from "../../../tab/tabContext";
import { Numeral } from "../../../text/numeral";
export const Listview = (props)=>{
    const { data: { pnlNotionalDecimalPrecision } } = useTabContext();
    const columns = useMemo(()=>{
        const cols = columnsBasis({
            onSymbolChange: props.onSymbolChange
        });
        cols[2] = {
            title: "Side",
            className: "orderly-h-[48px]",
            width: 100,
            dataIndex: "side",
            render: (value, record)=>{
                const status = record.status || record.algo_status;
                return /*#__PURE__*/ _jsx("span", {
                    className: cx("orderly-font-semibold", {
                        "orderly-text-trade-profit": status !== OrderStatus.CANCELLED && status !== OrderStatus.REJECTED && value === OrderSide.BUY,
                        "orderly-text-trade-loss": status !== OrderStatus.CANCELLED && status !== OrderStatus.REJECTED && value === OrderSide.SELL
                    }),
                    children: upperCaseFirstLetter(value)
                });
            }
        };
        cols[3] = {
            title: "Filled / Quantity",
            className: "orderly-h-[48px] orderly-font-semibold",
            dataIndex: "quantity",
            width: 200,
            render: (value, record)=>{
                if (record.type === OrderType.CLOSE_POSITION && record.status !== OrderStatus.FILLED) {
                    return "Entire position";
                }
                const status = record.status || record.algo_status;
                return /*#__PURE__*/ _jsx("span", {
                    className: cx("orderly-font-semibold", {
                        "orderly-text-trade-profit": status !== OrderStatus.CANCELLED && status !== OrderStatus.REJECTED && record.side === OrderSide.BUY,
                        "orderly-text-trade-loss": status !== OrderStatus.CANCELLED && status !== OrderStatus.REJECTED && record.side === OrderSide.SELL
                    }),
                    children: `${record.total_executed_quantity} / ${record.quantity}`
                });
            }
        };
        // realized_pnl
        cols.splice(7, 0, {
            title: "Realized PnL",
            width: 100,
            className: "orderly-h-[48px] orderly-font-semibold",
            dataIndex: "realized_pnl",
            render: (value, record)=>{
                if (record.type === OrderType.CLOSE_POSITION && record.status !== OrderStatus.FILLED) {
                    return "Entire position";
                }
                return /*#__PURE__*/ _jsx(Numeral, {
                    className: cn("orderly-font-semibold orderly-text-2xs", record.realized_pnl === 0 ? "" : record.realized_pnl > 0 ? "orderly-text-trade-profit" : "orderly-text-trade-loss"),
                    precision: pnlNotionalDecimalPrecision,
                    rule: "price",
                    prefix: record.realized_pnl > 0 ? '+' : '',
                    children: record.realized_pnl === 0 || Number.isNaN(record.realized_pnl) || record.realized_pnl === null ? "-" : `${record.realized_pnl}`
                });
            }
        });
        return cols;
    }, [
        pnlNotionalDecimalPrecision
    ]);
    const divRef = useRef(null);
    return /*#__PURE__*/ _jsx("div", {
        ref: divRef,
        className: "orderly-h-full orderly-overflow-y-auto",
        children: /*#__PURE__*/ _jsx(Table, {
            id: "orderly-desktop-order-history-content",
            bordered: true,
            justified: true,
            showMaskElement: props.loading,
            columns: columns,
            loading: props.loading,
            dataSource: props.dataSource,
            loadMore: props.loadMore,
            headerClassName: "orderly-text-2xs orderly-text-base-contrast-54 orderly-py-3 orderly-bg-base-900",
            className: cn("orderly-text-2xs orderly-text-base-contrast-80", props.className),
            generatedRowKey: (record, index)=>`${index}${record.order_id || record.algo_order_id}`,
            onRow: (record)=>{
                if (record.status === OrderStatus.CANCELLED || record.algo_status === OrderStatus.CANCELLED) {
                    return {
                        className: "orderly-text-base-contrast-20",
                        "data-cancelled": "true"
                    };
                }
                return {};
            },
            renderRowContainer: (record, index, children)=>{
                return /*#__PURE__*/ _jsx(SymbolProvider, {
                    symbol: record.symbol,
                    children: children
                }, index);
            },
            expandRowRender: (record, index)=>{
                return /*#__PURE__*/ _jsx(OrderTrades, {
                    record: record,
                    index: index
                });
            }
        })
    });
};

//# sourceMappingURL=listview.js.map