"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "MemorizedLeverage", {
    enumerable: true,
    get: function() {
        return MemorizedLeverage;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _hooks = require("@orderly.network/hooks");
const _text = require("../../../text");
const _lucidereact = require("lucide-react");
const _leverageDialog = require("./leverageDialog");
const _tooltip = require("../../../tooltip");
const _divider = require("../../../divider");
const _utils = require("../../../utils");
const _utils1 = require("../utils");
const LeverageAndMarginRatio = (props)=>{
    const { isConnected } = props;
    const { marginRatio, currentLeverage, mmr } = (0, _hooks.useMarginRatio)();
    const [maxLeverage, { update, config: leverageLevers }] = (0, _hooks.useLeverage)();
    const marginRatioVal = marginRatio === 0 ? 10 : Math.min(marginRatio, 10);
    const { isRed, isYellow, isGreen } = (0, _utils1.getMarginRatioColor)(marginRatioVal, mmr);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: "orderly-flex orderly-justify-between orderly-text-xs",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex orderly-flex-col orderly-tabular-nums orderly-items-start",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_tooltip.Tooltip, {
                        // @ts-ignore
                        content: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                            children: [
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                    children: "Your actual Leverage of the whole account / Your max Leverage of the whole account"
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {
                                    className: "orderly-py-2 orderly-border-white/10"
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                    children: "Margin ratio = Total collateral / Total position notional"
                                })
                            ]
                        }),
                        className: "orderly-max-w-[270px]",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            className: "orderly-text-base-contrast-54 orderly-text-3xs orderly-cursor-pointer",
                            children: "Margin ratio"
                        })
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                        className: (0, _utils.cn)("orderly-text-base-contrast", isConnected && (0, _utils.cn)({
                            "orderly-text-[#FF67C2]": isRed,
                            "orderly-text-[#FFCF73]": isYellow,
                            "orderly-text-[#1EF6B4]": isGreen
                        })),
                        rule: "percentages",
                        coloring: true,
                        children: isConnected ? marginRatioVal : "-"
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex orderly-flex-col orderly-items-end",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_tooltip.Tooltip, {
                        content: "Your actual Leverage of the whole account / Your max Leverage of the whole account",
                        className: "orderly-max-w-[270px]",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            className: "orderly-text-base-contrast-54 orderly-text-3xs orderly-cursor-pointer",
                            children: "Account leverage"
                        })
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex orderly-items-center orderly-gap-1 orderly-text-2xs",
                        children: [
                            isConnected ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                surfix: "x",
                                children: currentLeverage
                            }) : "-",
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                className: "orderly-text-base-contrast-54",
                                children: "/"
                            }),
                            isConnected ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_leverageDialog.LeverageDialog, {
                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
                                    className: "orderly-flex orderly-items-center orderly-gap-1",
                                    children: [
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                            children: `${maxLeverage ?? "-"}x`
                                        }),
                                        typeof maxLeverage !== "undefined" && // @ts-ignore
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_lucidereact.Pencil, {
                                            size: 14,
                                            className: "orderly-text-base-contrast-54"
                                        })
                                    ]
                                })
                            }) : "-"
                        ]
                    })
                ]
            })
        ]
    });
};
const MemorizedLeverage = /*#__PURE__*/ (0, _react.memo)(LeverageAndMarginRatio);

//# sourceMappingURL=leverage.js.map