import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { useMarginRatio, useLeverage } from "@orderly.network/hooks";
import { Numeral } from "../../../text";
import { Pencil } from "lucide-react";
import { LeverageDialog } from "./leverageDialog";
const LeverageAndMarginRatio = ()=>{
    const { marginRatio, currentLeverage } = useMarginRatio();
    const [maxLeverage, { update, config: leverageLevers }] = useLeverage();
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex orderly-justify-between orderly-text-xs",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-flex-col",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-flex orderly-items-center orderly-gap-1 orderly-text-2xs",
                        children: [
                            /*#__PURE__*/ _jsx(Numeral, {
                                surfix: "x",
                                children: currentLeverage
                            }),
                            /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast-54",
                                children: "/"
                            }),
                            /*#__PURE__*/ _jsx(LeverageDialog, {
                                children: /*#__PURE__*/ _jsxs("button", {
                                    className: "orderly-flex orderly-items-center orderly-gap-1",
                                    children: [
                                        /*#__PURE__*/ _jsx("span", {
                                            children: `${maxLeverage ?? "-"}x`
                                        }),
                                        typeof maxLeverage !== "undefined" && // @ts-ignore
                                        /*#__PURE__*/ _jsx(Pencil, {
                                            size: 14,
                                            className: "orderly-text-base-contrast-54"
                                        })
                                    ]
                                })
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-text-base-contrast-54 orderly-text-3xs",
                        children: "Account leverage"
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-flex-col orderly-tabular-nums orderly-items-end",
                children: [
                    /*#__PURE__*/ _jsx(Numeral, {
                        rule: "percentages",
                        coloring: true,
                        children: marginRatio === 0 ? 10 : Math.min(marginRatio, 10)
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: "orderly-text-base-contrast-54 orderly-text-2xs",
                        children: "Margin ratio"
                    })
                ]
            })
        ]
    });
};
export const MemorizedLeverage = /*#__PURE__*/ memo(LeverageAndMarginRatio);

//# sourceMappingURL=leverage.js.map