import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlgoOrderRootType, OrderSide } from "@orderly.network/types";
import { useMemo } from "react";
import { Table } from "../../table";
import { Numeral, Text } from "../../text";
import { upperCaseFirstLetter } from "../../utils/string";
import { cx } from "class-variance-authority";
import { OrderQuantity } from "../../block/orders/full/quantity";
import { CancelButton } from "./cancelButton";
import { cn } from "../../utils";
import { AlgoOrderBadge } from "./algoOrderTypeBadge";
import { SymbolProvider } from "../../provider";
import { TPSLOrderRowProvider } from "../../block/tp_sl/tpslOrderRowContext";
import { Decimal } from "@orderly.network/utils";
import { OrderPrice } from "./orderPrice";
import { OrderTriggerPrice } from "./orderTriggerPrice";
import { EditButton } from "./editButton";
export const TPSLListView = (props)=>{
    const columns = useMemo(()=>{
        const columns = [
            {
                title: "Instrument",
                dataIndex: "symbol",
                className: "orderly-h-[48px]",
                width: 120,
                onSort: (r1, r2, sortOrder)=>{
                    if (sortOrder === "asc") {
                        return r1.symbol.localeCompare(r2.symbol);
                    }
                    return r2.symbol.localeCompare(r1.symbol);
                },
                render: (value, record)=>/*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-flex-col orderly-py-1",
                        children: [
                            /*#__PURE__*/ _jsx(Text, {
                                rule: "symbol",
                                className: "orderly-font-semibold",
                                onClick: (e)=>{
                                    props.onSymbolChange?.({
                                        symbol: value
                                    });
                                    e.stopPropagation();
                                    e.preventDefault();
                                },
                                children: value
                            }),
                            /*#__PURE__*/ _jsx(AlgoOrderBadge, {
                                order: record
                            })
                        ]
                    })
            },
            {
                title: "Side",
                width: 100,
                className: "orderly-h-[48px]",
                dataIndex: "side",
                onSort: (r1, r2, sortOrder)=>{
                    if (sortOrder === "asc") {
                        return r2.side.localeCompare(r1.side);
                    }
                    return r1.side.localeCompare(r2.side);
                },
                render: (value)=>/*#__PURE__*/ _jsx("span", {
                        className: cx("orderly-font-semibold", value === OrderSide.BUY ? "orderly-text-trade-profit" : "orderly-text-trade-loss"),
                        children: upperCaseFirstLetter(value)
                    })
            },
            {
                title: "Quantity",
                className: "orderly-h-[48px] orderly-ui-pending-list-input-container orderly-ui-pending-list-quantity-input-container",
                dataIndex: "quantity",
                width: 120,
                // onSort: props.status === OrderStatus.INCOMPLETE,
                render: (value, record)=>{
                    if (record.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL) {
                        return "Entire position";
                    }
                    return /*#__PURE__*/ _jsx(OrderQuantity, {
                        order: record
                    });
                }
            },
            {
                title: "Trigger",
                className: "orderly-h-[48px] orderly-ui-pending-list-input-container orderly-ui-pending-list-trigger-input-container",
                dataIndex: "trigger_price",
                width: 120,
                // onSort: props.status === OrderStatus.INCOMPLETE,
                render: (value)=>{
                    return /*#__PURE__*/ _jsx(OrderTriggerPrice, {});
                }
            },
            {
                title: "Price",
                className: "orderly-h-[48px] orderly-ui-pending-list-input-container rderly-ui-pending-list-price-input-container",
                dataIndex: "price",
                width: 80,
                render: (value)=>{
                    return /*#__PURE__*/ _jsx(OrderPrice, {});
                }
            },
            {
                title: "Notional",
                width: 100,
                className: "orderly-h-[48px] orderly-font-semibold",
                dataIndex: "executed",
                render: (value, record)=>{
                    if (record.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL) {
                        return "Entire position";
                    }
                    return /*#__PURE__*/ _jsx(Numeral, {
                        className: "orderly-font-semibold orderly-text-2xs orderly-text-base-contrast-80",
                        precision: 2,
                        children: record.quantity === 0 ? "--" : `${new Decimal(record.mark_price).mul(record.quantity).todp(2).toNumber()}`
                    });
                }
            },
            {
                title: "Reduce-only",
                dataIndex: "reduce_only",
                width: 100,
                className: "orderly-h-[48px] orderly-font-semibold",
                render: (value, record)=>{
                    return /*#__PURE__*/ _jsx("span", {
                        children: record.child_orders[0].reduce_only ? "Yes" : "No"
                    });
                }
            },
            // {
            //   title: "Hidden",
            //   dataIndex: "visible",
            //   width: 100,
            //   className: "orderly-h-[48px] orderly-font-semibold",
            //   render: (value: number, record) => {
            //     // @ts-ignore
            //     return <span>{record.visible_quantity !== 0 ? "No" : "Yes"}</span>;
            //   },
            // },
            {
                title: "Order time",
                dataIndex: "created_time",
                width: 150,
                onSort: true,
                className: "orderly-h-[48px]",
                render: (value)=>/*#__PURE__*/ _jsx(Text, {
                        rule: "date",
                        className: "orderly-break-normal orderly-whitespace-nowrap orderly-font-semibold",
                        children: value
                    })
            },
            {
                title: "",
                dataIndex: "action",
                className: "orderly-h-[48px]",
                align: "right",
                fixed: "right",
                width: 160,
                render: (_, record)=>{
                    return /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-space-x-2 orderly-justify-end",
                        children: [
                            /*#__PURE__*/ _jsx(EditButton, {}),
                            /*#__PURE__*/ _jsx(CancelButton, {})
                        ]
                    });
                }
            }
        ];
        // columns.push();
        return columns;
    }, []);
    return /*#__PURE__*/ _jsx("div", {
        className: "orderly-h-full orderly-overflow-y-auto",
        children: /*#__PURE__*/ _jsx(Table, {
            id: "orderly-desktop-order-tp_sl-content",
            bordered: true,
            justified: true,
            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),
            columns: columns,
            dataSource: props.dataSource,
            renderRowContainer: (record, index, children)=>{
                return /*#__PURE__*/ _jsx(SymbolProvider, {
                    symbol: record.symbol,
                    children: /*#__PURE__*/ _jsx(TPSLOrderRowProvider, {
                        order: record,
                        children: children
                    })
                });
            }
        })
    });
};

//# sourceMappingURL=tpsl_listview.js.map