import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NetworkImage } from "../../icon/networkImage";
import { Numeral } from "../../text";
import { useSymbolsInfo } from "@orderly.network/hooks";
import { AlgoOrderRootType } from "@orderly.network/types";
import { commify } from "@orderly.network/utils";
import { useMemo, useState } from "react";
import { OrderConfirmCheckBox } from "../orderEntry/sections/orderConfirmView.new";
import { Button } from "../../button/button";
import { cn } from "../../utils";
export const AlgoOrderConfirmView = (props)=>{
    const { order, oldOrder, tp_trigger_price, sl_trigger_price } = props;
    const symbolConfig = useSymbolsInfo()[order.symbol]();
    const [loading, setLoading] = useState(false);
    const type = useMemo(()=>{
        if (order.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL) {
            if (typeof tp_trigger_price !== "undefined" && typeof sl_trigger_price !== "undefined") {
                return "Position TP/SL";
            }
            if (typeof tp_trigger_price !== "undefined") {
                return "Position TP";
            }
            if (typeof sl_trigger_price !== "undefined") {
                return "Position SL";
            }
        }
        if (order.algo_type === AlgoOrderRootType.TP_SL) {
            if (typeof tp_trigger_price !== "undefined" && typeof sl_trigger_price !== "undefined") {
                return "TP/SL";
            }
            if (typeof tp_trigger_price !== "undefined") {
                return "Take profit";
            }
            if (typeof sl_trigger_price !== "undefined") {
                return "Stop loss";
            }
        }
    }, [
        order
    ]);
    const qty = useMemo(()=>{
        if (order.algo_type === AlgoOrderRootType.POSITIONAL_TP_SL) {
            return "Entire position";
        }
        return commify(order.quantity);
    }, [
        order
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-px-5 orderly-mt-5",
        children: [
            props.isEditing && /*#__PURE__*/ _jsx("div", {
                className: "orderly-pb-3 orderly-text-sm orderly-text-base-contrast-80",
                children: `You agree to edit your ${symbolConfig.base}-PERP order.`
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-pb-4",
                children: [
                    /*#__PURE__*/ _jsx(NetworkImage, {
                        symbol: order.symbol,
                        type: "symbol",
                        size: 20
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: "desktop:orderly-text-lg orderly-pl-2",
                        children: `${symbolConfig.base}-PERP`
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: cn("orderly-text-base-contract-54 orderly-text-xs desktop:orderly-text-sm orderly-font-semibold orderly-flex orderly-gap-2"),
                children: [
                    !props.isEditing && /*#__PURE__*/ _jsx("div", {
                        className: " orderly-w-[78px] desktop:orderly-flex-1",
                        children: /*#__PURE__*/ _jsx("div", {
                            className: "orderly-mr-3",
                            children: type
                        })
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex-1 orderly-gap-2 orderly-text-xs desktop:orderly-text-sm",
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Qty."
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        children: qty
                                    })
                                ]
                            }),
                            !!tp_trigger_price && /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "TP Price"
                                    }),
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        children: tp_trigger_price,
                                        precision: props.quoteDp,
                                        rule: "price",
                                        coloring: true,
                                        surfix: /*#__PURE__*/ _jsx("span", {
                                            className: "orderly-text-base-contrast-36",
                                            children: symbolConfig.quote
                                        })
                                    })
                                ]
                            }),
                            !!sl_trigger_price && /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "SL Price"
                                    }),
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        children: sl_trigger_price,
                                        precision: props.quoteDp,
                                        rule: "price",
                                        className: "orderly-text-trade-loss",
                                        surfix: /*#__PURE__*/ _jsx("span", {
                                            className: "orderly-text-base-contrast-36",
                                            children: symbolConfig.quote
                                        })
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Price"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        children: "Market"
                                    })
                                ]
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: cn("orderly-grid orderly-grid-cols-1 desktop:orderly-mt-6 desktop:orderly-grid-cols-2", props.isEditing && "desktop:orderly-grid-cols-1 orderly-mt-3"),
                children: [
                    !props.isEditing ? /*#__PURE__*/ _jsx("div", {
                        className: "orderly-flex orderly-items-center orderly-h-[40px]",
                        children: /*#__PURE__*/ _jsx(OrderConfirmCheckBox, {})
                    }) : null,
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-grid orderly-grid-cols-2 orderly-gap-2",
                        children: [
                            /*#__PURE__*/ _jsx(Button, {
                                className: "orderly-confirm-dialog-cancal-button orderly-text-xs desktop:orderly-text-xs orderly-font-bold",
                                type: "button",
                                variant: "contained",
                                color: "tertiary",
                                onClick: props.onCancel,
                                disabled: loading,
                                fullWidth: true,
                                children: "Cancel"
                            }, "cancel"),
                            /*#__PURE__*/ _jsx(Button, {
                                className: "orderly-confirm-dialog-ok-button orderly-text-xs desktop:orderly-text-xs orderly-font-bold",
                                type: "button",
                                disabled: loading,
                                loading: loading,
                                fullWidth: true,
                                onClick: ()=>{
                                    setLoading(true);
                                    props.onConfirm?.().finally(()=>setLoading(false));
                                },
                                children: "Confirm"
                            }, "ok")
                        ]
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=algoOrderConfirmView.js.map