import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { OrderSide, OrderType } from "@orderly.network/types";
import { useMemo, useState } from "react";
import { Text } from "../../../text";
import { NetworkImage } from "../../../icon";
import { Checkbox } from "../../../checkbox";
import { useLocalStorage } from "@orderly.network/hooks";
import { Label } from "../../../label";
import Button from "../../../button";
import { cn } from "../../../utils";
import { useModal } from "../../../modal";
import { commify } from "@orderly.network/utils";
export const OrderConfirmView = (props)=>{
    const { order, quote = "USDC", base } = props;
    const type = useMemo(()=>{
        const type = (type)=>{
            switch(type){
                case OrderType.LIMIT:
                    return "Limit";
                case OrderType.MARKET:
                    return "Market";
                case OrderType.STOP_LIMIT:
                    return "Stop Limit";
                case OrderType.STOP_MARKET:
                    return "Stop Market";
            }
        };
        if (order.side === OrderSide.BUY) {
            return /*#__PURE__*/ _jsx(Text, {
                type: "buy",
                children: `${type(order.order_type)} Buy`
            });
        }
        return /*#__PURE__*/ _jsx(Text, {
            type: "sell",
            children: `${type(order.order_type)} Sell`
        });
    }, [
        order.side,
        order.order_type
    ]);
    const priceNode = useMemo(()=>{
        if (order.order_type === OrderType.MARKET || order.order_type === OrderType.STOP_MARKET) {
            return /*#__PURE__*/ _jsx("span", {
                children: "Market"
            });
        }
        return /*#__PURE__*/ _jsxs("div", {
            className: "orderly-inline-block",
            children: [
                /*#__PURE__*/ _jsx("span", {
                    children: commify(order.order_price || "")
                }),
                /*#__PURE__*/ _jsx("span", {
                    className: "orderly-text-base-contrast-36 orderly-ml-1",
                    children: quote
                })
            ]
        });
    }, [
        order
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-pb-4",
                children: [
                    /*#__PURE__*/ _jsx(NetworkImage, {
                        symbol: props.symbol,
                        type: "symbol",
                        size: 20
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: "orderly-text-lg orderly-pl-2",
                        children: `${base}-PERP`
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-text-base-contract-54 orderly-text-xs desktop:orderly-text-sm orderly-font-semibold",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        children: /*#__PURE__*/ _jsx("div", {
                            className: "orderly-mr-3 orderly-w-[89px] desktop:orderly-w-[180px]",
                            children: type
                        })
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex-1 orderly-gap-2",
                        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", {
                                        className: cn(order.side === OrderSide.BUY ? "orderly-text-trade-profit" : "orderly-text-trade-loss"),
                                        children: commify(order.order_quantity || "")
                                    })
                                ]
                            }),
                            order.isStopOrder === true && /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Trigger"
                                    }),
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: "orderly-inline-block",
                                        children: [
                                            /*#__PURE__*/ _jsx("span", {
                                                children: commify(order.trigger_price || "")
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                className: "orderly-text-base-contrast-36 orderly-ml-1",
                                                children: 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"
                                    }),
                                    priceNode
                                ]
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-justify-between orderly-mb-1",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "Est. Total"
                                    }),
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: "orderly-inline-block",
                                        children: [
                                            /*#__PURE__*/ _jsx("span", {
                                                children: commify(order.total || "")
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                className: "orderly-text-base-contrast-36 orderly-ml-1",
                                                children: quote
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    })
                ]
            }),
            props.isTable ? /*#__PURE__*/ _jsx("div", {
                className: "orderly-pt-3",
                children: /*#__PURE__*/ _jsx(OrderConfirmCheckBox, {})
            }) : undefined
        ]
    });
};
export const OrderConfirmCheckBox = (props)=>{
    const [needConfirm, setNeedConfirm] = useLocalStorage("orderly_order_confirm", true);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-flex orderly-items-center orderly-gap-1", props.className),
        children: [
            /*#__PURE__*/ _jsx(Checkbox, {
                id: "orderConfirm",
                checked: !needConfirm,
                onCheckedChange: (checked)=>{
                    setNeedConfirm(!!!checked);
                }
            }),
            /*#__PURE__*/ _jsx(Label, {
                htmlFor: "showAll",
                className: "orderly-text-base-contrast-54 orderly-text-3xs",
                onClick: ()=>{
                    setNeedConfirm(!needConfirm);
                },
                children: "Disable order confirmation"
            })
        ]
    });
};
export const OrderConfirmFooter = (props)=>{
    const { visible, hide, resolve, reject, onOpenChange } = useModal();
    const [loading, setLoading] = useState(false);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex orderly-gap-2 orderly-px-5",
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-flex-1 orderly-items-center orderly-h-[32px]",
                children: /*#__PURE__*/ _jsx(OrderConfirmCheckBox, {
                    className: "orderly-pt-[6px]"
                })
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex-1 orderly-flex orderly-gap-3 orderly-grid-cols-2",
                children: [
                    /*#__PURE__*/ _jsx(Button, {
                        id: "orderly-desktop-confirm-order-dialog-cancel",
                        className: "orderly-confirm-dialog-cancal-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__*/ _jsx(Button, {
                        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: ()=>{
                            return Promise.resolve().then(()=>{
                                if (typeof props.onOk === "function") {
                                    return props.onOk();
                                }
                                return true;
                            }).then((data)=>{
                                resolve(data);
                                hide();
                            });
                        },
                        children: "Confirm"
                    }, "ok")
                ]
            })
        ]
    });
};

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