"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "MarkPrice", {
    enumerable: true,
    get: function() {
        return MarkPrice;
    }
});
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 _modal = require("../../modal");
const MarkPrice = (props)=>{
    const { markPrice = 0, lastPrice } = props;
    const { quote_dp } = (0, _react.useContext)(_provider.SymbolContext);
    const [prevLastPrice, middlePrice] = lastPrice;
    //
    //
    const onMarkPrice = ()=>{
        _modal.modal.alert({
            title: "Mark price",
            message: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                className: "orderly-text-3xs orderly-text-base-contrast-54",
                children: "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."
            })
        });
    };
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        id: "orderly-order-book-mark-price",
        className: "orderly-py-1 orderly-flex orderly-justify-between orderly-text-xs orderly-text-base-contrast-80 desktop:orderly-h-[42px] desktop:orderly-text-[20px] desktop:orderly-justify-center desktop:orderly-gap-5 orderly-tabular-nums",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: (0, _css.cn)("orderly-font-semibold orderly-flex orderly-items-center desktop:orderly-font-normal desktop:orderly-relative desktop:orderly-pr-4", {
                    "orderly-text-trade-profit": middlePrice > prevLastPrice,
                    "orderly-text-trade-loss": middlePrice < prevLastPrice
                }),
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                        precision: quote_dp,
                        children: middlePrice
                    }),
                    prevLastPrice !== middlePrice && // @ts-ignore
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_lucidereact.MoveUpIcon, {
                        size: 14,
                        color: "currentcolor",
                        className: (0, _css.cn)("desktop:orderly-absolute desktop:orderly-right-0", {
                            "orderly-rotate-180": middlePrice < prevLastPrice
                        })
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-flex orderly-items-center orderly-gap-1 orderly-text-3xs desktop:orderly-text-base",
                onClick: onMarkPrice,
                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: markPrice
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=markPrice.js.map