import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Button from "../../button";
import { Statistic } from "../../statistic";
import { Tag } from "../../tag";
import { useCallback, useContext, useMemo, useState } from "react";
import { OrderSide } from "@orderly.network/types";
import { Text } from "../../text";
import { NumeralTotal } from "../../text/numeralTotal";
import { OrderListContext } from "./shared/orderListContext";
import { SymbolContext } from "../../provider";
export const OrderCell = (props)=>{
    const { order } = props;
    const [loading, setLoading] = useState(false);
    const { onCancelOrder, onEditOrder } = useContext(OrderListContext);
    const { quote, quote_dp, base, base_dp } = useContext(SymbolContext);
    const isAlgoOrder = order?.algo_order_id !== undefined;
    // console.log("price node", order);
    const isStopMarket = order?.type === "MARKET" && isAlgoOrder;
    const typeTag = useMemo(()=>{
        return /*#__PURE__*/ _jsx(Tag, {
            color: order.side === "BUY" ? "buy" : "sell",
            size: "small",
            children: order.side === "BUY" ? "Buy" : "Sell"
        });
    }, [
        order
    ]);
    const cancelOrder = useCallback(()=>{
        if (loading) return;
        setLoading(true);
        onCancelOrder(order).finally(()=>setLoading(false));
    }, [
        loading,
        order
    ]);
    const onSymbol = ()=>{
        props.onSymbolChange?.({
            symbol: order.symbol
        });
        // go to the top of page
        window.scrollTo(0, 0);
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-px-4 orderly-py-2",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-gap-2 orderly-mb-1",
                children: [
                    typeTag,
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-flex-1 orderly-text-2xs",
                        onClick: onSymbol,
                        children: /*#__PURE__*/ _jsx(Text, {
                            rule: "symbol",
                            children: order.symbol
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-text-4xs orderly-text-base-contrast-36",
                        children: /*#__PURE__*/ _jsx(Text, {
                            rule: "date",
                            children: order.created_time
                        })
                    })
                ]
            }),
            /*#__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",
                        value: order.quantity ?? "-",
                        precision: base_dp,
                        rule: "price",
                        valueClassName: order.side === OrderSide.BUY ? "orderly-text-trade-profit orderly-text-3xs" : "orderly-text-trade-loss orderly-text-3xs"
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        label: "Filled",
                        labelClassName: "orderly-text-4xs orderly-text-base-contrast-36",
                        valueClassName: "orderly-text-3xs orderly-text-base-contrast-80",
                        // @ts-ignore
                        value: order.total_executed_quantity ?? "-",
                        rule: "price",
                        precision: base_dp
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        label: /*#__PURE__*/ _jsxs(_Fragment, {
                            children: [
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-36",
                                    children: "Est. total"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "orderly-text-base-contrast-20",
                                    children: "(USDC)"
                                })
                            ]
                        }),
                        labelClassName: "orderly-text-4xs orderly-text-base-contrast-36",
                        valueClassName: "orderly-text-3xs orderly-text-base-contrast-80",
                        value: /*#__PURE__*/ _jsx(NumeralTotal, {
                            price: props.order.price ?? 1,
                            quantity: props.order.quantity,
                            precision: quote_dp
                        }),
                        align: "right"
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        label: /*#__PURE__*/ _jsx(_Fragment, {
                            children: /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-36",
                                children: "Trigger price"
                            })
                        }),
                        labelClassName: "orderly-text-4xs orderly-text-base-contrast-36",
                        valueClassName: "orderly-text-3xs orderly-text-base-contrast-80",
                        rule: "price",
                        precision: quote_dp,
                        value: order.trigger_price
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        label: /*#__PURE__*/ _jsx(_Fragment, {
                            children: /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-36",
                                children: "Limit price"
                            })
                        }),
                        labelClassName: "orderly-text-4xs orderly-text-base-contrast-36",
                        valueClassName: "orderly-text-3xs orderly-text-base-contrast-80",
                        value: isStopMarket ? /*#__PURE__*/ _jsx("span", {
                            children: "Market"
                        }) : order.price ?? "-",
                        rule: "price",
                        precision: quote_dp
                    }),
                    /*#__PURE__*/ _jsx(Statistic, {
                        label: /*#__PURE__*/ _jsx(_Fragment, {
                            children: /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-36",
                                children: "Mark price"
                            })
                        }),
                        labelClassName: "orderly-text-4xs orderly-text-base-contrast-36",
                        valueClassName: "orderly-text-3xs orderly-text-base-contrast-80",
                        rule: "price",
                        precision: quote_dp,
                        value: order.mark_price,
                        align: "right"
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-gap-3 orderly-text-4xs orderly-justify-end orderly-mt-2",
                children: [
                    /*#__PURE__*/ _jsx(Button, {
                        id: "orderly-pending-cell-edit-button",
                        variant: "outlined",
                        size: "small",
                        color: "tertiary",
                        className: "orderly-w-[120px] orderly-text-4xs",
                        onClick: ()=>onEditOrder(order),
                        children: "Edit"
                    }),
                    /*#__PURE__*/ _jsx(Button, {
                        id: "orderly-pending-cell-cancel-button",
                        variant: "outlined",
                        color: "tertiary",
                        size: "small",
                        className: "orderly-w-[120px] orderly-text-4xs",
                        loading: loading,
                        onClick: cancelOrder,
                        children: "Cancel"
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=cell.js.map