import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Button from "../../button";
import { Tag } from "../../tag";
import { useCallback, useContext, useMemo, useState } from "react";
import { Text } from "../../text";
import { OrderListContext } from "./shared/orderListContext";
import { SymbolContext } from "../../provider";
import { AlgoOrderRootType } from "@orderly.network/types";
import { useTPSLOrderRowContext } from "../tp_sl/tpslOrderRowContext";
import { TPSLOrderTag } from "./orderTPSLTag";
import { RegularCell } from "./cell.regular";
import { TPSLCell } from "./cell.tpsl";
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 { position } = useTPSLOrderRowContext();
    const typeTag = useMemo(()=>{
        return /*#__PURE__*/ _jsx(Tag, {
            color: order.side === "BUY" ? "buy" : "sell",
            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);
    };
    const infoEle = useMemo(()=>{
        if ("algo_type" in order && (order.algo_type === AlgoOrderRootType.TP_SL || order.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL)) {
            return /*#__PURE__*/ _jsx(TPSLCell, {
                order: order,
                base_dp: base_dp,
                quote_dp: quote_dp
            });
        }
        return /*#__PURE__*/ _jsx(RegularCell, {
            order: order,
            base_dp: base_dp,
            quote_dp: quote_dp
        });
    }, [
        order,
        base_dp,
        quote_dp
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-px-4 orderly-py-3",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-mb-1 orderly-flex orderly-items-end orderly-justify-between",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex-col",
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-items-center orderly-gap-2 ",
                                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(TPSLOrderTag, {
                                order: order
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-text-4xs orderly-text-base-contrast-36",
                        children: /*#__PURE__*/ _jsx(Text, {
                            rule: "date",
                            children: order.created_time
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-grid orderly-grid-cols-3 orderly-gap-2 orderly-py-1",
                children: infoEle
            }),
            /*#__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, position),
                        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