"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Ticker", {
    enumerable: true,
    get: function() {
        return Ticker;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _statistic = require("../../../../../statistic");
const _defaultStaticStyle = require("../../../../../statistic/defaultStaticStyle");
const _hooks = require("@orderly.network/hooks");
const _text = require("../../../../../text");
const _fundingRate = require("./fundingRate");
const _symbolProvider = require("../../../../../provider/symbolProvider");
const _tickerMask = require("./tickerMask");
const _numeralWithCtx = require("../../../../../text/numeralWithCtx");
const _icon = require("../../../../../icon");
const _utils = require("@orderly.network/utils");
const Ticker = (props)=>{
    const { symbol } = props;
    const data = (0, _hooks.useTickerStream)(symbol);
    const [leadingVisible, setLeadingVisible] = (0, _react.useState)(false);
    const [tailingVisible, setTailingVisible] = (0, _react.useState)(false);
    const { base, quote } = (0, _symbolProvider.useSymbolContext)();
    const containerRef = (0, _react.useRef)(null);
    const leadingElementRef = (0, _react.useRef)(null);
    const tailingElementRef = (0, _react.useRef)(null);
    (0, _react.useEffect)(()=>{
        const intersectionObserver = new IntersectionObserver((entries)=>{
            for(let index = 0; index < entries.length; index++){
                const item = entries[index];
                if (item) {
                    if (item.target === leadingElementRef.current) {
                        setLeadingVisible(!item.isIntersecting);
                    }
                    if (item.target === tailingElementRef.current) {
                        setTailingVisible(!item.isIntersecting);
                    }
                }
            }
        });
        if (leadingElementRef.current) {
            intersectionObserver.observe(leadingElementRef.current);
        }
        if (tailingElementRef.current) {
            intersectionObserver.observe(tailingElementRef.current);
        }
        return ()=>{
            intersectionObserver.disconnect();
        };
    }, []);
    const onScollButtonClick = (direction)=>{
        if (direction === "left") containerRef.current?.scrollBy({
            left: -100,
            behavior: "smooth"
        });
        else containerRef.current?.scrollBy({
            left: 100,
            behavior: "smooth"
        });
    };
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_defaultStaticStyle.StatisticStyleProvider, {
        labelClassName: "orderly-text-4xs orderly-text-base-contrast-54 orderly-break-normal orderly-whitespace-nowrap",
        valueClassName: "orderly-text-2xs orderly-text-base-contrast-80 orderly-tabular-nums orderly-font-semibold",
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            className: "orderly-relative orderly-overflow-hidden",
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    className: "orderly-flex orderly-space-x-5 orderly-relative orderly-items-center orderly-h-full orderly-overflow-x-auto orderly-hide-scrollbar",
                    ref: containerRef,
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            ref: leadingElementRef,
                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_numeralWithCtx.NumeralWithCtx, {
                                className: "orderly-font-semibold",
                                children: data?.["24h_close"]
                            })
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "24h change",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-space-x-1",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_numeralWithCtx.NumeralWithCtx, {
                                        coloring: true,
                                        children: data?.["24h_change"]
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "/"
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                        coloring: true,
                                        rule: "percentages",
                                        children: data?.change || 0
                                    })
                                ]
                            })
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "Mark",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsx)(_numeralWithCtx.NumeralWithCtx, {
                                children: data?.mark_price
                            }),
                            rule: "price",
                            hint: "Price for the computation of unrealized PnL and liquidation."
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "Index",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsx)(_numeralWithCtx.NumeralWithCtx, {
                                children: data?.index_price
                            }),
                            // value={data?.index_price}
                            rule: "price",
                            hint: "Average of the last prices across other exchanges."
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            hint: "24 hour total trading volume on the Orderly Network.",
                            label: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-items-center",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.OrderlyIcon, {
                                        size: 14,
                                        className: "orderly-mr-[6px]"
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                        children: "24h volume"
                                    })
                                ]
                            }),
                            value: /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                rule: "human",
                                children: data?.["24h_amount"]
                            })
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_fundingRate.MemoizedCompnent, {
                            symbol: props.symbol
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
                            label: "Open interest",
                            value: /*#__PURE__*/ (0, _jsxruntime.jsx)(_text.Numeral, {
                                rule: "human",
                                unit: quote,
                                children: new _utils.Decimal(data?.open_interest ?? 0).mul(data?.index_price ?? 0).toDecimalPlaces(2).valueOf()
                            }),
                            rule: "price",
                            hint: "Total size of positions per side."
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            ref: tailingElementRef,
                            className: "orderly-pr-[20px]"
                        })
                    ]
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_tickerMask.TickerMask, {
                    leading: true,
                    visible: leadingVisible,
                    onClick: onScollButtonClick
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_tickerMask.TickerMask, {
                    tailing: true,
                    visible: tailingVisible,
                    onClick: onScollButtonClick
                })
            ]
        })
    });
};

//# sourceMappingURL=ticker.js.map