"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "TriggerPrice", {
    enumerable: true,
    get: function() {
        return TriggerPrice;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _button = /*#__PURE__*/ _interop_require_default(require("../../../button"));
const _popover = require("../../../popover");
const _symbolProvider = require("../../../provider/symbolProvider");
const _css = require("../../../utils/css");
const _utils = require("@orderly.network/utils");
const _lucidereact = require("lucide-react");
const _react = require("react");
const _orderListContext = require("../shared/orderListContext");
const _toast = require("../../../toast");
const _divider = require("../../../divider");
const _hooks = require("@orderly.network/hooks");
const _input = require("../../../input");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const TriggerPrice = (props)=>{
    const { order } = props;
    const [price, setPrice] = (0, _react.useState)("");
    (0, _react.useEffect)(()=>{
        setPrice(order.trigger_price?.toString() ?? "0");
    }, [
        order.trigger_price
    ]);
    const isAlgoOrder = order?.algo_order_id !== undefined;
    const [open, setOpen] = (0, _react.useState)(0);
    const [editting, setEditting] = (0, _react.useState)(false);
    if (!isAlgoOrder) {
        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
            children: "-"
        });
    }
    if (!editting && open <= 0) {
        return /*#__PURE__*/ (0, _jsxruntime.jsx)(NormalState, {
            order: order,
            price: price,
            setEditing: setEditting
        });
    }
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(EditingState, {
        order: order,
        price: price,
        setPrice: setPrice,
        editting: editting,
        setEditting: setEditting,
        open: open,
        setOpen: setOpen
    });
};
const NormalState = (props)=>{
    const { order, price } = props;
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
        className: (0, _css.cn)("orderly-flex orderly-max-w-[110px] orderly-justify-start orderly-items-center orderly-gap-1 orderly-relative orderly-font-semibold"),
        onClick: (e)=>{
            e.stopPropagation();
            e.preventDefault();
            props.setEditing(true);
        },
        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
            className: "orderly-px-2 orderly-flex orderly-min-w-[70px] orderly-items-center orderly-h-[28px] orderly-bg-base-700 orderly-text-2xs orderly-font-semibold orderly-rounded-lg",
            children: price
        })
    });
};
const EditingState = (props)=>{
    const { order, price, setPrice, editting, setEditting, setOpen, open } = props;
    const [isSubmitting, setIsSubmitting] = (0, _react.useState)(false);
    const { editAlgoOrder, checkMinNotional } = (0, _react.useContext)(_orderListContext.OrderListContext);
    const ee = (0, _hooks.useEventEmitter)();
    const boxRef = (0, _react.useRef)(null);
    const confirmRef = (0, _react.useRef)(null);
    const { base, base_dp } = (0, _symbolProvider.useSymbolContext)();
    const closePopover = ()=>setOpen(0);
    const cancelPopover = ()=>{
        setOpen(-1);
        setPrice(order.trigger_price?.toString() ?? "0");
    };
    (0, _react.useEffect)(()=>{
        const clickHandler = (event)=>{
            // close the input when click outside of boxRef
            const el = boxRef?.current;
            if (!el || el.contains(event.target)) {
                return;
            }
            const el2 = confirmRef?.current;
            if (!el2 || el2.contains(event.target)) {
                return;
            }
            setPrice(order.trigger_price?.toString() ?? "0");
            setEditting(false);
        };
        document.body.addEventListener("click", clickHandler);
        return ()=>{
            document.body.removeEventListener("click", clickHandler);
        };
    }, []);
    const onClick = ()=>{
        // event.stopPropagation();
        // event.preventDefault();
        setEditting(false);
        if (Number(price) === Number(order.trigger_price)) {
            return;
        }
        if (order.price && order.reduce_only !== true) {
            const notionalText = checkMinNotional(order.symbol, order.price, order.quantity);
            if (notionalText) {
                _toast.toast.error(notionalText);
                setIsSubmitting(false);
                cancelPopover();
                return;
            }
        }
        setOpen(1);
    };
    const handleKeyDown = (event)=>{
        if (event.key === "Enter") {
            event.stopPropagation();
            event.preventDefault();
            onClick();
        }
    };
    const onClickCancel = (order)=>{
        setPrice(order.trigger_price);
        setEditting(false);
    };
    const onConfirm = ()=>{
        setIsSubmitting(true);
        // @ts-ignore
        let data = {
            // price: price,
            quantity: order.quantity,
            trigger_price: price,
            symbol: order.symbol,
            // order_type: order.type,
            // side: order.side,
            // reduce_only: Boolean(order.reduce_only),
            algo_order_id: order.algo_order_id
        };
        if (order.order_tag !== undefined) {
            data = {
                ...data,
                order_tag: order.order_tag
            };
        }
        // @ts-ignore
        editAlgoOrder(`${order.algo_order_id}`, data).then((result)=>{
            closePopover();
            setPrice(price);
        // setTimeout(() => inputRef.current?.blur(), 300);
        }, (err)=>{
            _toast.toast.error(err.message);
            // @ts-ignore
            setPrice(order.trigger_price?.toString());
            cancelPopover();
        }).finally(()=>setIsSubmitting(false));
    };
    const inputRef = (0, _react.useRef)(null);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_popover.Popover, {
        open: open > 0,
        onOpenChange: (open)=>setOpen(open ? 1 : 0),
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            className: "orderly-flex orderly-justify-start orderly-items-center orderly-gap-1 orderly-relative orderly-font-semibold",
            ref: boxRef,
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    className: (0, _css.cn)("orderly-absolute orderly-left-1 orderly-flex", {
                        "orderly-animate-in orderly-fade-in orderly-zoom-in": editting,
                        "orderly-animate-out orderly-fade-out orderly-zoom-out orderly-hidden": !editting
                    }),
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                            className: "hover:orderly-bg-base-contrast/10 orderly-h-[25px] orderly-rounded orderly-px-1 orderly-text-base-contrast-54 hover:orderly-text-base-contrast-80",
                            onClick: ()=>onClickCancel(order),
                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_lucidereact.X, {
                                size: 14
                            })
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {
                            vertical: true,
                            className: "orderly-ml-[1px] before:orderly-h-[16px] orderly-min-w-[2px]"
                        })
                    ]
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_popover.PopoverAnchor, {
                    asChild: true,
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_input.Input, {
                        ref: inputRef,
                        type: "text",
                        value: (0, _utils.commify)(price),
                        onChange: (e)=>setPrice((0, _hooks.cleanStringStyle)(e.target.value)),
                        onFocus: ()=>setEditting(true),
                        onBlur: ()=>{
                            setTimeout(()=>{
                                setEditting(false);
                                if (open <= 0) {
                                    setPrice(order.trigger_price?.toString() ?? "0");
                                }
                            }, 100);
                        },
                        autoFocus: true,
                        onKeyDown: handleKeyDown,
                        containerClassName: "orderly-h-auto orderly-pl-7",
                        className: "orderly-w-full orderly-flex-1 orderly-pl-9 orderly-pr-9 orderly-bg-base-700 orderly-px-2 orderly-py-1 orderly-rounded "
                    })
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    className: (0, _css.cn)("orderly-absolute orderly-right-1 orderly-flex", {
                        "orderly-animate-in orderly-fade-in orderly-zoom-in": editting,
                        "orderly-animate-out orderly-fade-out orderly-zoom-out  orderly-hidden": !editting
                    }),
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {
                            vertical: true,
                            className: "before:orderly-h-[16px] orderly-min-w-[2px] orderly-mr-[1px]"
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                            className: "hover:orderly-bg-base-contrast/10 orderly-h-[25px] orderly-rounded orderly-px-1 orderly-text-base-contrast-54 hover:orderly-text-base-contrast-80",
                            // @ts-ignore
                            onMouseDown: onClick,
                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_lucidereact.Check, {
                                size: 18
                            })
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_popover.PopoverContent, {
                            align: "end",
                            side: "top",
                            className: "orderly-w-[340px]",
                            onCloseAutoFocus: (e)=>{
                                if (inputRef.current && open === -1) {
                                    inputRef.current.focus();
                                }
                            },
                            onOpenAutoFocus: (e)=>e.preventDefault(),
                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-pt-5 orderly-relative",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                        className: "orderly-text-base-contrast-54 orderly-text-2xs desktop:orderly-text-sm",
                                        children: [
                                            "You agree changing the trigger price of ",
                                            base,
                                            "-PERP order to",
                                            " ",
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                                className: "orderly-text-warning",
                                                children: (0, _utils.commify)(price)
                                            }),
                                            "."
                                        ]
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                        className: "orderly-grid orderly-grid-cols-2 orderly-gap-2 orderly-mt-5",
                                        children: [
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                                                color: "tertiary",
                                                onClick: cancelPopover,
                                                disabled: isSubmitting,
                                                children: "Cancel"
                                            }),
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                                                // @ts-ignore
                                                ref: confirmRef,
                                                loading: isSubmitting,
                                                onClick: onConfirm,
                                                children: "Confirm"
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                                        className: "orderly-absolute orderly-right-0 orderly-top-0 orderly-text-base-contrast-54",
                                        onClick: cancelPopover,
                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_lucidereact.X, {
                                            size: 18
                                        })
                                    })
                                ]
                            })
                        })
                    ]
                })
            ]
        })
    });
};

//# sourceMappingURL=triggerPrice.js.map