"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "DesktopMarkPrice", {
    enumerable: true,
    get: function() {
        return DesktopMarkPrice;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _provider = require("../../../provider");
const _text = require("../../../text");
const _css = require("../../../utils/css");
const _lucidereact = require("lucide-react");
const _react = require("react");
const _utils = require("@orderly.network/utils");
const _tooltip = require("../../../tooltip");
const DesktopMarkPrice = (props)=>{
    const { markPrice = 0, lastPrice, asks, bids } = props;
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: "orderly-py-1 orderly-flex orderly-justify-between orderly-text-xs orderly-text-base-contrast-80 desktop:orderly-h-[40px] desktop:orderly-text-[20px] desktop:orderly-justify-between orderly-tabular-nums",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex orderly-flex-1 orderly-flex-row orderly-gap-2",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Price, {
                        markPrice: markPrice,
                        lastPrice: lastPrice
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(MarkPrice, {
                        markPrice: markPrice
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)(Spread, {
                asks: asks,
                bids: bids
            })
        ]
    });
};
const Price = (props)=>{
    const { markPrice = 0, lastPrice } = props;
    const { quote_dp } = (0, _react.useContext)(_provider.SymbolContext);
    const [prevLastPrice, middlePrice] = lastPrice;
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: (0, _css.cn)("orderly-text-lg orderly-flex orderly-items-center desktop:orderly-font-normal", {
            "orderly-text-trade-profit": middlePrice > prevLastPrice,
            "orderly-text-trade-loss": middlePrice < prevLastPrice
        }),
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                className: "orderly-font-bold",
                precision: quote_dp,
                children: middlePrice
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)(ArrowTopIcon, {
                size: 12,
                className: (0, _css.cn)("orderly-ml-1", {
                    "orderly-rotate-180": middlePrice < prevLastPrice,
                    "orderly-fill-trade-profit": middlePrice > prevLastPrice,
                    "orderly-fill-trade-loss": middlePrice < prevLastPrice,
                    "orderly-fill-transparent": middlePrice === prevLastPrice
                })
            })
        ]
    });
};
const MarkPrice = (props)=>{
    const { quote_dp } = (0, _react.useContext)(_provider.SymbolContext);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_tooltip.Tooltip, {
        content: "Obtained from a third-party oracle, the mark price is calculated as the median of three prices: the last price, the fair price based on the funding rate basis, and the fair price based on the order books.",
        className: "orderly-max-w-[270px]",
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            className: "orderly-flex orderly-items-center orderly-text-3xs desktop:orderly-text-2xs orderly-cursor-pointer",
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_lucidereact.Flag, {
                    size: 14,
                    className: "orderly-text-yellow-400"
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                    precision: quote_dp,
                    className: "desktop:orderly-text-base-contrast-54",
                    children: props.markPrice
                })
            ]
        })
    });
};
const Spread = (props)=>{
    const { asks, bids } = props;
    const spread = (0, _react.useMemo)(()=>{
        if (bids.length === 0 && asks.length === 0) {
            return 0;
        }
        const bid1 = Number.isNaN(bids[0][0]) ? 0 : bids[0][0];
        const index = asks.reverse().findIndex((item)=>!Number.isNaN(item[0]));
        let ask1 = 0.0;
        if (index !== -1) {
            ask1 = Number.isNaN(asks[index][0]) ? 0 : asks[index][0];
        }
        const dValue = new _utils.Decimal(ask1).sub(bid1).div(new _utils.Decimal(ask1).add(bid1).div(2));
        // 0.00006416604461251195
        // 0.000065
        // 0.0065
        return Math.ceil(dValue.toNumber() * 1000000 + 0.1) / 10000;
    }, [
        asks,
        bids
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_tooltip.Tooltip, {
            content: "Spread Ratio of the ask1 and bid1.",
            className: "orderly-max-w-[240px]",
            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-text-3xs orderly-text-base-contrast-36 orderly-items-center orderly-h-full orderly-flex orderly-pr-3 orderly-cursor-pointer",
                children: `${spread}%`
            })
        })
    });
};
const ArrowTopIcon = (props)=>{
    const { size = 12, viewBox, ...rest } = props;
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        width: `${size}px`,
        height: `${size}px`,
        fill: "current",
        fillOpacity: 1,
        viewBox: `0 0 11.68 12.3`,
        ...rest,
        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
            d: "M12.3058 6.58699L13.1514 5.63574L7.42409 0.544834L7.00132 0.161367L6.57854 0.544834L0.851268 5.63574L1.69682 6.58699L6.36496 2.43753L6.36496 11.8386L7.63769 11.8386L7.63769 2.43755L12.3058 6.58699Z"
        })
    });
};

//# sourceMappingURL=markPrice.desktop.js.map