"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "TPSLForm", {
    enumerable: true,
    get: function() {
        return TPSLForm;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _input = require("../../input");
const _react = require("react");
const _divider = require("../../divider");
const _button = /*#__PURE__*/ _interop_require_default(require("../../button"));
const _types = require("@orderly.network/types");
const _numeral = require("../../text/numeral");
const _hooks = require("@orderly.network/hooks");
const _utils = require("@orderly.network/utils");
const _slider = require("../../slider");
const _pnlInput = require("../../block/tp_sl/pnlInput");
const _utils1 = require("../../utils");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const TPSLForm = (props)=>{
    if (!props.symbol) {
        throw new _types.SDKError("Symbol is required");
    }
    if (typeof props.maxQty === "undefined") {
        throw new _types.SDKError("Max quantity is required");
    }
    const { maxQty, order, canModifyQty = true } = props;
    const symbolInfo = (0, _hooks.useSymbolsInfo)()[props.symbol];
    const maxQtyNumber = (0, _react.useMemo)(()=>{
        return Math.abs(maxQty);
    }, [
        maxQty
    ]);
    const qtyRef = (0, _react.useRef)(null);
    const isPositionTPSLOrder = (0, _react.useMemo)(()=>!!props.order.quantity && props.order.quantity === maxQtyNumber, [
        props.order.quantity,
        maxQtyNumber
    ]);
    const dirty = (0, _react.useMemo)(()=>{
        const quantity = props.oldOrder?.algo_type === _types.AlgoOrderRootType.POSITIONAL_TP_SL ? maxQtyNumber : props.oldOrder?.quantity;
        let diff = 0;
        if (Number(order.quantity) !== quantity) {
            diff = 1;
        }
        if (props.oldOrder) {
            const tp = props.oldOrder.child_orders.find((o)=>o.algo_type === _types.AlgoOrderType.TAKE_PROFIT);
            const sl = props.oldOrder.child_orders.find((o)=>o.algo_type === _types.AlgoOrderType.STOP_LOSS);
            if (tp?.trigger_price !== Number(order.tp_trigger_price) && typeof typeof order.tp_trigger_price !== "undefined") {
                // return true;
                diff = 2;
            }
            if (sl?.trigger_price !== Number(order.sl_trigger_price) && typeof order.sl_trigger_price !== "undefined") {
                diff = 3;
            }
        }
        if (diff === 1 && !order.tp_trigger_price && !order.sl_trigger_price) {
            diff = -1;
        }
        return diff;
    }, [
        order.tp_trigger_price,
        order.sl_trigger_price,
        order.quantity,
        props.oldOrder
    ]);
    const canSubmit = (0, _react.useMemo)(()=>{
        if (props.oldOrder?.algo_type === _types.AlgoOrderRootType.POSITIONAL_TP_SL && Number(order.quantity) < maxQty && !order.tp_trigger_price && !order.sl_trigger_price) {
            return false;
        }
        return dirty > 0 && !!order.quantity;
    }, [
        dirty,
        order.quantity,
        maxQty,
        props.oldOrder
    ]);
    const cleanQtyInput = ()=>{
        props.onChange("quantity", "");
        qtyRef.current?.focus();
    };
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        id: "orderly-tp_sl-form",
        className: (0, _utils1.cn)("orderly-space-y-4 orderly-text-3xs", props.className),
        children: [
            canModifyQty ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_input.Input, {
                                        error: !!props.errors?.quantity?.message,
                                        helpText: props.errors?.quantity?.message,
                                        ref: qtyRef,
                                        prefix: "Quantity",
                                        fixClassName: "desktop:orderly-text-2xs",
                                        suffix: isPositionTPSLOrder && !props.isEditing ? /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                                            className: "orderly-pr-2 orderly-text-base-contrast-54 orderly-h-full",
                                            onClick: ()=>{
                                                cleanQtyInput();
                                            },
                                            children: "Entire position"
                                        }) : symbolInfo("base"),
                                        value: isPositionTPSLOrder && !props.isEditing ? "" : (0, _utils.commify)(props.order.quantity ?? 0),
                                        className: "orderly-text-right",
                                        containerClassName: "desktop:orderly-bg-base-700 orderly-bg-base-500 orderly-flex-1",
                                        name: "orderQuantity",
                                        id: "tpslOrderQuantity",
                                        autoComplete: "off",
                                        "data-testid": "order-quantity",
                                        thousandSeparator: true,
                                        // onChange={(e) => {
                                        //   props.onChange("quantity", e.target.value.replace(/,/g, ""));
                                        // }}
                                        onValueChange: (value)=>{
                                            props.onChange("quantity", (0, _utils.todpIfNeed)(value, symbolInfo("base_dp")));
                                        }
                                    }),
                                    !props.isEditing && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                                        onClick: ()=>{
                                            if (isPositionTPSLOrder) {
                                                // props.onChange("quantity", "");
                                                // qtyRef.current?.focus();
                                                cleanQtyInput();
                                            } else {
                                                props.onChange("quantity", maxQtyNumber);
                                            }
                                        },
                                        className: (0, _utils1.cn)("orderly-bg-base-600 orderly-rounded orderly-px-2 orderly-text-base-contrast-54 orderly-border orderly-border-base-300 orderly-ml-2", isPositionTPSLOrder && "orderly-border-primary orderly-text-primary"),
                                        children: "Position"
                                    })
                                ]
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_slider.Slider, {
                                id: "orderly-tp_sl-slider",
                                min: 0,
                                color: "primary",
                                max: maxQtyNumber,
                                markCount: 4,
                                step: symbolInfo("base_tick"),
                                value: [
                                    Number(order.quantity ?? maxQty)
                                ],
                                onValueChange: (value)=>{
                                    if (typeof value[0] !== "undefined") {
                                        props.onChange("quantity", value[0]);
                                    }
                                },
                                className: "orderly-mt-2"
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-justify-between orderly-text-primary orderly-text-2xs",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        children: "0%"
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
                                        disabled: maxQtyNumber <= 0,
                                        onClick: ()=>{
                                            props.onChange("quantity", maxQty);
                                        },
                                        children: [
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                                children: "Max"
                                            }),
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_numeral.Numeral, {
                                                className: "orderly-text-base-contrast-54 orderly-ml-1",
                                                precision: symbolInfo("base_dp"),
                                                children: maxQty
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {})
                ]
            }) : null,
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex orderly-justify-between orderly-mb-[8px] orderly-items-center",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                className: "orderly-text-xs",
                                children: "Take profit"
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-text-base-contrast-36 orderly-text-2xs",
                                "data-testid": "tpEstPnL",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        children: "Est. PnL: "
                                    }),
                                    order.tp_pnl ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_numeral.Numeral, {
                                        rule: "price",
                                        coloring: true,
                                        precision: symbolInfo("quote_dp"),
                                        children: order.tp_pnl
                                    }) : "-"
                                ]
                            })
                        ]
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-grid orderly-grid-cols-2 orderly-gap-2",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_input.Input, {
                                error: !!props.errors?.tp_trigger_price?.message,
                                helpText: props.errors?.tp_trigger_price?.message,
                                prefix: "TP price",
                                fixClassName: "desktop:orderly-text-3xs",
                                placeholder: symbolInfo("quote"),
                                className: "orderly-text-right orderly-pr-2 orderly-text-3xs placeholder:orderly-text-3xs",
                                "data-testid": "tp-price-input",
                                value: (0, _utils.commify)(order.tp_trigger_price ?? ""),
                                thousandSeparator: true,
                                autoComplete: "off",
                                onValueChange: (value)=>{
                                    props.onChange("tp_trigger_price", value);
                                },
                                containerClassName: "desktop:orderly-bg-base-700 orderly-bg-base-500"
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pnlInput.PnlInput, {
                                quote: symbolInfo("quote"),
                                quote_dp: symbolInfo("quote_dp"),
                                onChange: props.onChange,
                                type: "TP",
                                values: {
                                    PnL: `${order.tp_pnl ?? ""}`,
                                    Offset: `${order.tp_offset ?? ""}`,
                                    "Offset%": `${order.tp_offset_percentage ?? ""}`
                                }
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex orderly-justify-between orderly-mb-[8px] orderly-items-center",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                className: "orderly-text-xs",
                                children: "Stop loss"
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-text-base-contrast-36 orderly-text-2xs",
                                "data-testid": "slEstPnL",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        children: "Est. PnL: "
                                    }),
                                    order.sl_pnl ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_numeral.Numeral, {
                                        rule: "price",
                                        coloring: true,
                                        precision: symbolInfo("quote_dp"),
                                        children: order.sl_pnl
                                    }) : "-"
                                ]
                            })
                        ]
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-grid orderly-grid-cols-2 orderly-gap-2",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_input.Input, {
                                error: !!props.errors?.sl_trigger_price?.message,
                                helpText: props.errors?.sl_trigger_price?.message,
                                prefix: "SL price",
                                fixClassName: "desktop:orderly-text-3xs",
                                placeholder: symbolInfo("quote"),
                                className: "orderly-text-right orderly-pr-2 orderly-text-3xs placeholder:orderly-text-3xs",
                                "data-testid": "sl-price-input",
                                thousandSeparator: true,
                                containerClassName: "desktop:orderly-bg-base-700 orderly-bg-base-500",
                                onValueChange: (value)=>{
                                    props.onChange("sl_trigger_price", value);
                                },
                                value: (0, _utils.commify)(order.sl_trigger_price ?? "")
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pnlInput.PnlInput, {
                                quote: symbolInfo("quote"),
                                onChange: props.onChange,
                                type: "SL",
                                quote_dp: symbolInfo("quote_dp"),
                                values: {
                                    PnL: `${order.sl_pnl ?? ""}`,
                                    Offset: `${order.sl_offset ?? ""}`,
                                    "Offset%": `${order.sl_offset_percentage ?? ""}`
                                }
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex orderly-justify-center orderly-gap-3 orderly-pt-2 desktop:orderly-pt-0",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                        color: "tertiary",
                        className: "orderly-flex-1 desktop:orderly-w-[98px] desktop:orderly-h-[32px] desktop:orderly-flex-none",
                        onClick: ()=>props.onCancel?.(),
                        children: "Cancel"
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                        className: "orderly-flex-1 desktop:orderly-w-[98px] desktop:orderly-h-[32px] desktop:orderly-flex-none",
                        "data-testid": "confirm",
                        onClick: props.onSubmit,
                        disabled: !canSubmit,
                        children: "Confirm"
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=tpAndslForm.js.map