import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useRef } from "react";
import { Table } from "../../../table";
import { OrderStatus, OrderSide } 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 { PositionEmptyView } from "../../../block/positions/full/positionEmptyView";
export const Listview = (props)=>{
    const columns = useMemo(()=>{
        const cols = columnsBasis({
            onSymbolChange: props.onSymbolChange
        });
        //
        cols[2] = {
            title: "Side",
            className: "orderly-h-[48px]",
            width: 100,
            dataIndex: "side",
            render: (value, record)=>/*#__PURE__*/ _jsx("span", {
                    className: cx("orderly-font-semibold", {
                        "orderly-text-trade-profit": record.status !== OrderStatus.CANCELLED && record.status !== OrderStatus.REJECTED && value === OrderSide.BUY,
                        "orderly-text-trade-loss": record.status !== OrderStatus.CANCELLED && record.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)=>{
                return /*#__PURE__*/ _jsx("span", {
                    className: cx("orderly-font-semibold", {
                        "orderly-text-trade-profit": record.status !== OrderStatus.CANCELLED && record.status !== OrderStatus.REJECTED && record.side === OrderSide.BUY,
                        "orderly-text-trade-loss": record.status !== OrderStatus.CANCELLED && record.status !== OrderStatus.REJECTED && record.side === OrderSide.SELL
                    }),
                    children: `${record.total_executed_quantity} / ${record.quantity}`
                });
            }
        };
        return cols;
    }, []);
    const divRef = useRef(null);
    return /*#__PURE__*/ _jsxs("div", {
        ref: divRef,
        className: "orderly-h-full orderly-overflow-y-auto",
        children: [
            /*#__PURE__*/ _jsx(Table, {
                bordered: true,
                justified: true,
                showMaskElement: false,
                columns: columns,
                loading: props.loading,
                dataSource: props.dataSource,
                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)=>{
                    // console.log(record);
                    if (record.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
                    });
                },
                scrollToEnd: ()=>{
                    if (!props.loading) {
                        props.loadMore?.();
                    }
                }
            }),
            (!props.dataSource || props.dataSource.length <= 0) && /*#__PURE__*/ _jsx(PositionEmptyView, {
                watchRef: divRef,
                left: 0,
                right: 120
            })
        ]
    });
};

//# sourceMappingURL=listview.js.map