"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    OrderConfirmCheckBox: function() {
        return OrderConfirmCheckBox;
    },
    OrderConfirmFooter: function() {
        return OrderConfirmFooter;
    },
    OrderConfirmView: function() {
        return OrderConfirmView;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _types = require("@orderly.network/types");
const _react = require("react");
const _text = require("../../../text");
const _icon = require("../../../icon");
const _checkbox = require("../../../checkbox");
const _hooks = require("@orderly.network/hooks");
const _label = require("../../../label");
const _button = /*#__PURE__*/ _interop_require_default(require("../../../button"));
const _utils = require("../../../utils");
const _modal = require("../../../modal");
const _utils1 = require("@orderly.network/utils");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const OrderConfirmView = (props)=>{
    const { order, quote = "USDC", base } = props;
    const type = (0, _react.useMemo)(()=>{
        const type = (type)=>{
            switch(type){
                case _types.OrderType.LIMIT:
                    return "Limit";
                case _types.OrderType.MARKET:
                    return "Market";
                case _types.OrderType.STOP_LIMIT:
                    return "Stop Limit";
                case _types.OrderType.STOP_MARKET:
                    return "Stop Market";
            }
        };
        if (order.side === _types.OrderSide.BUY) {
            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Text, {
                type: "buy",
                children: `${type(order.order_type)} Buy`
            });
        }
        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Text, {
            type: "sell",
            children: `${type(order.order_type)} Sell`
        });
    }, [
        order.side,
        order.order_type
    ]);
    const priceNode = (0, _react.useMemo)(()=>{
        if (order.order_type === _types.OrderType.MARKET || order.order_type === _types.OrderType.STOP_MARKET) {
            return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                children: "Market"
            });
        }
        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            className: "orderly-inline-block",
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                    children: (0, _utils1.commify)(order.order_price || "")
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                    className: "orderly-text-base-contrast-36 orderly-ml-1",
                    children: quote
                })
            ]
        });
    }, [
        order
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex orderly-items-center orderly-pb-4",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.NetworkImage, {
                        symbol: props.symbol,
                        type: "symbol",
                        size: 20
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                        className: "orderly-text-lg orderly-pl-2",
                        children: `${base}-PERP`
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex orderly-text-base-contract-54 orderly-text-xs desktop:orderly-text-sm orderly-font-semibold",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            className: "orderly-mr-3 orderly-w-[89px] desktop:orderly-w-[180px]",
                            children: type
                        })
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex-1 orderly-gap-2",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Qty."
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        className: (0, _utils.cn)(order.side === _types.OrderSide.BUY ? "orderly-text-trade-profit" : "orderly-text-trade-loss"),
                                        children: (0, _utils1.commify)(order.order_quantity || "")
                                    })
                                ]
                            }),
                            order.isStopOrder === true && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Trigger"
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                        className: "orderly-inline-block",
                                        children: [
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                                children: (0, _utils1.commify)(order.trigger_price || "")
                                            }),
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                                className: "orderly-text-base-contrast-36 orderly-ml-1",
                                                children: quote
                                            })
                                        ]
                                    })
                                ]
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Price"
                                    }),
                                    priceNode
                                ]
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Est. Total"
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                        className: "orderly-inline-block",
                                        children: [
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                                children: (0, _utils1.commify)(order.total || "")
                                            }),
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                                className: "orderly-text-base-contrast-36 orderly-ml-1",
                                                children: quote
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    })
                ]
            }),
            props.isTable ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-pt-3",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(OrderConfirmCheckBox, {})
            }) : undefined
        ]
    });
};
const OrderConfirmCheckBox = (props)=>{
    const [needConfirm, setNeedConfirm] = (0, _hooks.useLocalStorage)("orderly_order_confirm", true);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: (0, _utils.cn)("orderly-flex orderly-items-center orderly-gap-1", props.className),
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_checkbox.Checkbox, {
                id: "orderConfirm",
                checked: !needConfirm,
                onCheckedChange: (checked)=>{
                    setNeedConfirm(!!!checked);
                }
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_label.Label, {
                htmlFor: "showAll",
                className: "orderly-text-base-contrast-54 orderly-text-3xs",
                onClick: ()=>{
                    setNeedConfirm(!needConfirm);
                },
                children: "Disable order confirmation"
            })
        ]
    });
};
const OrderConfirmFooter = (props)=>{
    const { visible, hide, resolve, reject, onOpenChange } = (0, _modal.useModal)();
    const [loading, setLoading] = (0, _react.useState)(false);
    const onSubmit = (0, _hooks.useDebouncedCallback)(()=>{
        setLoading(true);
        return Promise.resolve().then(()=>{
            if (typeof props.onOk === "function") {
                return props.onOk();
            }
            return true;
        }).then((data)=>{
            resolve(data);
            hide();
        }).finally(()=>{
            setLoading(false);
        });
    }, 300, {
        leading: true
    });
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: "orderly-flex orderly-gap-2 orderly-px-5",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-flex-1 orderly-items-center orderly-h-[32px]",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(OrderConfirmCheckBox, {
                    className: "orderly-pt-[6px]"
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex-1 orderly-flex orderly-gap-3 orderly-grid-cols-2",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                        id: "orderly-desktop-confirm-order-dialog-cancel",
                        className: "orderly-confirm-dialog-cancel-button orderly-h-[32px] orderly-text-xs desktop:orderly-text-xs orderly-font-bold",
                        type: "button",
                        variant: "contained",
                        color: "tertiary",
                        loading: loading,
                        onClick: ()=>{
                            return props.onCancel?.().then((data)=>data, (reason)=>{
                                reject(reason);
                            }).finally(()=>hide());
                        },
                        fullWidth: true,
                        children: "Cancel"
                    }, "cancel"),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                        id: "orderly-desktop-confirm-order-dialog-confirm",
                        className: "orderly-confirm-dialog-ok-button orderly-h-[32px] orderly-text-xs desktop:orderly-text-xs orderly-font-bold",
                        type: "button",
                        disabled: loading,
                        loading: loading,
                        fullWidth: true,
                        onClick: onSubmit,
                        children: "Confirm"
                    }, "ok")
                ]
            })
        ]
    });
};

//# sourceMappingURL=orderConfirmView.new.js.map