import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useContext, useMemo } from "react";
import Button from "../../../button";
import { Divider } from "../../../divider";
import { NetworkImage } from "../../../icon/networkImage";
import { Paper } from "../../../layout";
import { RiskIndicator } from "../../../riskIndicator";
import { Statistic } from "../../../statistic";
import { StatisticStyleProvider } from "../../../statistic/defaultStaticStyle";
import { Numeral } from "../../../text";
import { RotateCw } from "lucide-react";
import { useCollateral, usePositionStream, useMarginRatio, useLeverage } from "@orderly.network/hooks";
// import Slider from "rc-slider";
import { modal } from "../../../modal";
import { toast } from "../../../toast";
import { AssetsContext } from "../../../provider/assetsProvider";
import { EyeIcon, EyeOffIcon } from "../../../icon";
import { cn } from "../../../utils/css";
import { cx } from "class-variance-authority";
import { LeverageEditor } from "./leverageEditor";
import { getMarginRatioColor } from "../utils";
// const leverageLevers = [1, 2, 3, 4, 5, 10];
export const AssetAndMarginSheet = (props)=>{
    const { totalCollateral, freeCollateral, totalValue, availableBalance } = useCollateral({
        dp: 2
    });
    const [{ aggregated, totalUnrealizedROI }, positionsInfo] = usePositionStream();
    const { marginRatio, currentLeverage, mmr } = useMarginRatio();
    const { visible, toggleVisible, onDeposit, onWithdraw } = useContext(AssetsContext);
    const [maxLeverage, { update, config: leverageLevers }] = 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 = useCallback(()=>{
        return modal.confirm({
            title: "Settle PnL",
            maxWidth: "xs",
            content: /*#__PURE__*/ _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 = useMemo(()=>{
        return Math.min(10, aggregated.notional === 0 ? positionsInfo["margin_ratio"](10) : marginRatio);
    }, [
        marginRatio,
        aggregated
    ]);
    const { isRed, isYellow, isGreen } = getMarginRatioColor(marginRatioVal, mmr);
    return /*#__PURE__*/ _jsx("div", {
        id: "orderly-asset-and-margin-sheet-content",
        children: /*#__PURE__*/ _jsxs(StatisticStyleProvider, {
            labelClassName: "orderly-text-4xs orderly-text-base-contrast/30",
            children: [
                /*#__PURE__*/ _jsx("div", {
                    className: "orderly-pt-5",
                    children: /*#__PURE__*/ _jsx(Statistic, {
                        label: /*#__PURE__*/ _jsxs("div", {
                            className: "orderly-flex orderly-items-center orderly-text-2xs orderly-text-base-contrast-54",
                            children: [
                                /*#__PURE__*/ _jsx("span", {
                                    children: "Total value (USDC)"
                                }),
                                /*#__PURE__*/ _jsx("button", {
                                    className: "orderly-text-link orderly-p-2",
                                    onClick: (event)=>{
                                        event.stopPropagation();
                                        toggleVisible();
                                    },
                                    children: visible ? /*#__PURE__*/ _jsx(EyeOffIcon, {
                                        size: 16
                                    }) : /*#__PURE__*/ _jsx(EyeIcon, {
                                        size: 16
                                    })
                                })
                            ]
                        }),
                        value: totalValue,
                        rule: "price",
                        visible: visible
                    })
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "orderly-grid orderly-grid-cols-2 orderly-py-4",
                    children: [
                        /*#__PURE__*/ _jsx(Statistic, {
                            label: "Unreal. PnL(USDC)",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-gap-1 orderly-items-center orderly-text-2xs",
                                children: [
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        coloring: true,
                                        visible: visible,
                                        children: aggregated.unrealPnL
                                    }),
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        visible: visible,
                                        rule: "percentages",
                                        coloring: true,
                                        surfix: ")",
                                        prefix: "(",
                                        className: "orderly-text-4xs orderly-opacity-60",
                                        children: totalUnrealizedROI
                                    })
                                ]
                            }),
                            rule: "price",
                            coloring: true
                        }),
                        /*#__PURE__*/ _jsx(Statistic, {
                            label: "Unsettled PnL(USDC)",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-justify-between",
                                children: [
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        rule: "price",
                                        visible: visible,
                                        coloring: true,
                                        className: "orderly-text-2xs",
                                        children: aggregated.unsettledPnL
                                    }),
                                    /*#__PURE__*/ _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__*/ _jsx(RotateCw, {
                                                size: 14
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                children: "Settle PnL"
                                            })
                                        ]
                                    })
                                ]
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx(Divider, {}),
                /*#__PURE__*/ _jsxs("div", {
                    className: "orderly-grid orderly-grid-cols-2 orderly-py-4",
                    children: [
                        /*#__PURE__*/ _jsx(Statistic, {
                            label: "Margin ratio",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-items-center orderly-gap-2 orderly-text-2xs",
                                children: [
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        rule: "percentages",
                                        className: cx({
                                            "orderly-text-primary-light": isGreen,
                                            "orderly-text-warning": isYellow,
                                            "orderly-text-danger": isRed
                                        }),
                                        visible: visible,
                                        children: marginRatioVal
                                    }),
                                    /*#__PURE__*/ _jsx(RiskIndicator, {
                                        className: cn({
                                            "orderly-rotate-0": isGreen,
                                            "orderly-rotate-90": isYellow,
                                            "orderly-rotate-180": isRed
                                        })
                                    })
                                ]
                            })
                        }),
                        /*#__PURE__*/ _jsx(Statistic, {
                            label: "Free / Total collateral(USDC)",
                            labelClassName: "orderly-text-base-contrast-36",
                            value: /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-gap-1 orderly-text-2xs",
                                children: [
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        visible: visible,
                                        children: freeCollateral
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        children: "/"
                                    }),
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        visible: visible,
                                        children: totalCollateral
                                    })
                                ]
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx("div", {
                    children: /*#__PURE__*/ _jsx(Statistic, {
                        label: /*#__PURE__*/ _jsxs("div", {
                            className: "orderly-flex orderly-justify-between orderly-text-base-contrast-36",
                            children: [
                                /*#__PURE__*/ _jsx("span", {
                                    children: "Max account leverage"
                                }),
                                /*#__PURE__*/ _jsxs("span", {
                                    className: "orderly-flex",
                                    children: [
                                        "Current:",
                                        /*#__PURE__*/ _jsx(Numeral, {
                                            className: "orderly-text-base-contrast orderly-ml-1",
                                            surfix: "x",
                                            children: currentLeverage
                                        })
                                    ]
                                })
                            ]
                        }),
                        value: /*#__PURE__*/ _jsx("div", {
                            className: "orderly-h-[50px] orderly-mt-2 orderly-mx-2 orderly-text-2xs",
                            children: /*#__PURE__*/ _jsx(LeverageEditor, {
                                leverageLevers: leverageLevers,
                                onSave: (value)=>{
                                    return update(value).then((res)=>{
                                        toast.success("Leverage updated");
                                        return res;
                                    }, (err)=>{
                                        //
                                        toast.error(err.message);
                                        // setLeverage(maxLeverage ?? 1);
                                        throw err;
                                    });
                                },
                                maxLeverage: maxLeverage
                            })
                        })
                    })
                }),
                /*#__PURE__*/ _jsx(Divider, {
                    className: "orderly-py-4"
                }),
                /*#__PURE__*/ _jsxs(Paper, {
                    className: "orderly-bg-base-700",
                    children: [
                        /*#__PURE__*/ _jsxs("div", {
                            className: "orderly-flex orderly-justify-between orderly-text-4xs orderly-text-base-contrast-36",
                            children: [
                                /*#__PURE__*/ _jsx("span", {
                                    children: "Instrument"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    children: "Available balance"
                                })
                            ]
                        }),
                        /*#__PURE__*/ _jsx(Divider, {
                            className: "orderly-py-3"
                        }),
                        /*#__PURE__*/ _jsxs("div", {
                            className: "orderly-flex orderly-justify-between orderly-text-2xs",
                            children: [
                                /*#__PURE__*/ _jsxs("div", {
                                    className: "orderly-flex orderly-items-center orderly-gap-2",
                                    children: [
                                        /*#__PURE__*/ _jsx(NetworkImage, {
                                            name: "USDC",
                                            type: "token",
                                            size: 14
                                        }),
                                        /*#__PURE__*/ _jsx("span", {
                                            children: "USDC"
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ _jsx(Numeral, {
                                    precision: 2,
                                    visible: visible,
                                    children: availableBalance
                                })
                            ]
                        })
                    ]
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "orderly-flex orderly-gap-3 orderly-py-5 orderly-text-xs",
                    children: [
                        /*#__PURE__*/ _jsx(Button, {
                            fullWidth: true,
                            onClick: onDeposit,
                            id: "orderly-assets-margin-deposit-button",
                            children: "Deposit"
                        }),
                        /*#__PURE__*/ _jsx(Button, {
                            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