"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "AssetAndMarginSheet", {
    enumerable: true,
    get: function() {
        return AssetAndMarginSheet;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
const _button = /*#__PURE__*/ _interop_require_default(require("../../../button"));
const _divider = require("../../../divider");
const _networkImage = require("../../../icon/networkImage");
const _layout = require("../../../layout");
const _riskIndicator = require("../../../riskIndicator");
const _statistic = require("../../../statistic");
const _defaultStaticStyle = require("../../../statistic/defaultStaticStyle");
const _text = require("../../../text");
const _lucidereact = require("lucide-react");
const _hooks = require("@orderly.network/hooks");
const _modal = require("../../../modal");
const _toast = require("../../../toast");
const _assetsProvider = require("../../../provider/assetsProvider");
const _icon = require("../../../icon");
const _css = require("../../../utils/css");
const _classvarianceauthority = require("class-variance-authority");
const _leverageEditor = require("./leverageEditor");
const _utils = require("../utils");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
const AssetAndMarginSheet = (props)=>{
    const { totalCollateral, freeCollateral, totalValue, availableBalance } = (0, _hooks.useCollateral)({
        dp: 2
    });
    const [{ aggregated, totalUnrealizedROI }, positionsInfo] = (0, _hooks.usePositionStream)();
    const { marginRatio, currentLeverage, mmr } = (0, _hooks.useMarginRatio)();
    const { visible, toggleVisible, onDeposit, onWithdraw } = (0, _react.useContext)(_assetsProvider.AssetsContext);
    const [maxLeverage, { update, config: leverageLevers }] = (0, _hooks.useLeverage)();
    // console.log("leverageLevers", leverageLevers);
    // const [leverage, setLeverage] = React.useState(() => maxLeverage ?? 0);
    // const leverageValue = useMemo(() => {
    //   const index = leverageLevers.findIndex((item) => item === leverage);
    //   return index;
    // }, [leverage, leverageLevers]);
    const onUnsettleClick = (0, _react.useCallback)(()=>{
        return _modal.modal.confirm({
            title: "Settle PnL",
            maxWidth: "xs",
            content: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-text-base-contrast-54 orderly-text-2xs desktop:orderly-text-sm",
                children: "Are you sure you want to settle your PnL? Settlement will take up to 1 minute before you can withdraw your available balance."
            }),
            onCancel: ()=>{
                return Promise.reject();
            },
            onOk: ()=>{
                if (typeof props.onSettle !== "function") return Promise.resolve();
                return props.onSettle().catch((e)=>{});
            }
        });
    }, []);
    const marginRatioVal = (0, _react.useMemo)(()=>{
        return Math.min(10, aggregated.notional === 0 ? positionsInfo["margin_ratio"](10) : marginRatio);
    }, [
        marginRatio,
        aggregated
    ]);
    const { isRed, isYellow, isGreen } = (0, _utils.getMarginRatioColor)(marginRatioVal, mmr);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
        id: "orderly-asset-and-margin-sheet-content",
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_defaultStaticStyle.StatisticStyleProvider, {
            labelClassName: "orderly-text-4xs orderly-text-base-contrast/30",
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    className: "orderly-pt-5",
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                        label: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                            className: "orderly-flex orderly-items-center orderly-text-2xs orderly-text-base-contrast-54",
                            children: [
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                    children: "Total value (USDC)"
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                                    className: "orderly-text-link orderly-p-2",
                                    onClick: (event)=>{
                                        event.stopPropagation();
                                        toggleVisible();
                                    },
                                    children: visible ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.EyeOffIcon, {
                                        size: 16
                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.EyeIcon, {
                                        size: 16
                                    })
                                })
                            ]
                        }),
                        value: totalValue,
                        rule: "price",
                        visible: visible
                    })
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    className: "orderly-grid orderly-grid-cols-2 orderly-py-4",
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "Unreal. PnL(USDC)",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-gap-1 orderly-items-center orderly-text-2xs",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                        coloring: true,
                                        visible: visible,
                                        children: aggregated.unrealPnL
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                        visible: visible,
                                        rule: "percentages",
                                        coloring: true,
                                        surfix: ")",
                                        prefix: "(",
                                        className: "orderly-text-4xs orderly-opacity-60",
                                        children: totalUnrealizedROI
                                    })
                                ]
                            }),
                            rule: "price",
                            coloring: true
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "Unsettled PnL(USDC)",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-justify-between",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                        rule: "price",
                                        visible: visible,
                                        coloring: true,
                                        className: "orderly-text-2xs",
                                        children: aggregated.unsettledPnL
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
                                        className: "orderly-text-link orderly-text-3xs orderly-flex orderly-items-center orderly-gap-1 disabled:orderly-opacity-50 disabled:orderly-cursor-not-allowed",
                                        onClick: onUnsettleClick,
                                        disabled: aggregated.unsettledPnL === 0,
                                        children: [
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_lucidereact.RotateCw, {
                                                size: 14
                                            }),
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                                children: "Settle PnL"
                                            })
                                        ]
                                    })
                                ]
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {}),
                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    className: "orderly-grid orderly-grid-cols-2 orderly-py-4",
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "Margin ratio",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-items-center orderly-gap-2 orderly-text-2xs",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                        rule: "percentages",
                                        className: (0, _classvarianceauthority.cx)({
                                            "orderly-text-primary-light": isGreen,
                                            "orderly-text-warning": isYellow,
                                            "orderly-text-danger": isRed
                                        }),
                                        visible: visible,
                                        children: marginRatioVal
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_riskIndicator.RiskIndicator, {
                                        className: (0, _css.cn)({
                                            "orderly-rotate-0": isGreen,
                                            "orderly-rotate-90": isYellow,
                                            "orderly-rotate-180": isRed
                                        })
                                    })
                                ]
                            })
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "Free / Total collateral(USDC)",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-gap-1 orderly-text-2xs",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                        visible: visible,
                                        children: freeCollateral
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        children: "/"
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                        visible: visible,
                                        children: totalCollateral
                                    })
                                ]
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                        label: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                            className: "orderly-flex orderly-justify-between orderly-text-base-contrast-36",
                            children: [
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                    children: "Max account leverage"
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
                                    className: "orderly-flex",
                                    children: [
                                        "Current:",
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                            className: "orderly-text-base-contrast orderly-ml-1",
                                            surfix: "x",
                                            children: currentLeverage
                                        })
                                    ]
                                })
                            ]
                        }),
                        value: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            className: "orderly-h-[50px] orderly-mt-2 orderly-mx-2 orderly-text-2xs",
                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_leverageEditor.LeverageEditor, {
                                leverageLevers: leverageLevers,
                                onSave: (value)=>{
                                    return update(value).then((res)=>{
                                        _toast.toast.success("Leverage updated");
                                        return res;
                                    }, (err)=>{
                                        //
                                        _toast.toast.error(err.message);
                                        // setLeverage(maxLeverage ?? 1);
                                        throw err;
                                    });
                                },
                                maxLeverage: maxLeverage
                            })
                        })
                    })
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {
                    className: "orderly-py-4"
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_layout.Paper, {
                    className: "orderly-bg-base-700",
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                            className: "orderly-flex orderly-justify-between orderly-text-4xs orderly-text-base-contrast-36",
                            children: [
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                    children: "Instrument"
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                    children: "Available balance"
                                })
                            ]
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {
                            className: "orderly-py-3"
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                            className: "orderly-flex orderly-justify-between orderly-text-2xs",
                            children: [
                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                    className: "orderly-flex orderly-items-center orderly-gap-2",
                                    children: [
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_networkImage.NetworkImage, {
                                            name: "USDC",
                                            type: "token",
                                            size: 14
                                        }),
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                            children: "USDC"
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                    precision: 2,
                                    visible: visible,
                                    children: availableBalance
                                })
                            ]
                        })
                    ]
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    className: "orderly-flex orderly-gap-3 orderly-py-5 orderly-text-xs",
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                            fullWidth: true,
                            onClick: onDeposit,
                            id: "orderly-assets-margin-deposit-button",
                            children: "Deposit"
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                            fullWidth: true,
                            variant: "outlined",
                            onClick: onWithdraw,
                            id: "orderly-assets-margin-withdraw-button",
                            className: "orderly-border-primary-darken hover:orderly-bg-transport orderly-text-primary",
                            children: "Withdraw"
                        })
                    ]
                })
            ]
        })
    });
};

//# sourceMappingURL=assetAndMargin.js.map