import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { Statistic } from "../../../../../statistic";
import { StatisticStyleProvider } from "../../../../../statistic/defaultStaticStyle";
import { useTickerStream } from "@orderly.network/hooks";
import { Numeral } from "../../../../../text";
import { MemoizedCompnent } from "./fundingRate";
import { useSymbolContext } from "../../../../../provider/symbolProvider";
import { TickerMask } from "./tickerMask";
import { NumeralWithCtx } from "../../../../../text/numeralWithCtx";
import { OrderlyIcon } from "../../../../../icon";
import { Decimal } from "@orderly.network/utils";
export const Ticker = (props)=>{
    const { symbol } = props;
    const data = useTickerStream(symbol);
    const [leadingVisible, setLeadingVisible] = useState(false);
    const [tailingVisible, setTailingVisible] = useState(false);
    const { base, quote } = useSymbolContext();
    const containerRef = useRef(null);
    const leadingElementRef = useRef(null);
    const tailingElementRef = useRef(null);
    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__*/ _jsx(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__*/ _jsxs("div", {
            className: "orderly-relative orderly-overflow-hidden",
            children: [
                /*#__PURE__*/ _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__*/ _jsx("div", {
                            ref: leadingElementRef,
                            children: /*#__PURE__*/ _jsx(NumeralWithCtx, {
                                className: "orderly-font-semibold",
                                children: data?.["24h_close"]
                            })
                        }),
                        /*#__PURE__*/ _jsx(Statistic, {
                            label: "24h change",
                            value: /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-space-x-1",
                                children: [
                                    /*#__PURE__*/ _jsx(NumeralWithCtx, {
                                        coloring: true,
                                        children: data?.["24h_change"]
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "orderly-text-base-contrast-54",
                                        children: "/"
                                    }),
                                    /*#__PURE__*/ _jsx(Numeral, {
                                        coloring: true,
                                        rule: "percentages",
                                        children: data?.change || 0
                                    })
                                ]
                            })
                        }),
                        /*#__PURE__*/ _jsx(Statistic, {
                            id: "orderly-top-nav-mark-price",
                            label: "Mark",
                            value: /*#__PURE__*/ _jsx("div", {
                                id: "orderly-top-nav-mark-price-value",
                                children: /*#__PURE__*/ _jsx(NumeralWithCtx, {
                                    children: data?.mark_price
                                })
                            }),
                            rule: "price",
                            hint: "Price for the computation of unrealized PnL and liquidation."
                        }),
                        /*#__PURE__*/ _jsx(Statistic, {
                            label: "Index",
                            value: /*#__PURE__*/ _jsx(NumeralWithCtx, {
                                children: data?.index_price
                            }),
                            // value={data?.index_price}
                            rule: "price",
                            hint: "Average of the last prices across other exchanges."
                        }),
                        /*#__PURE__*/ _jsx(Statistic, {
                            hint: "24 hour total trading volume on the Orderly Network.",
                            label: /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-items-center",
                                children: [
                                    /*#__PURE__*/ _jsx(OrderlyIcon, {
                                        size: 14,
                                        className: "orderly-mr-[6px]"
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        children: "24h volume"
                                    })
                                ]
                            }),
                            value: /*#__PURE__*/ _jsx(Numeral, {
                                className: "orderly-whitespace-nowrap",
                                rule: "human",
                                unit: ` ${quote}`,
                                children: data?.["24h_amount"]
                            })
                        }),
                        /*#__PURE__*/ _jsx(MemoizedCompnent, {
                            symbol: props.symbol
                        }),
                        /*#__PURE__*/ _jsx(Statistic, {
                            label: "Open interest",
                            value: /*#__PURE__*/ _jsx(Numeral, {
                                className: "orderly-whitespace-nowrap",
                                rule: "human",
                                unit: ` ${quote}`,
                                children: new Decimal(data?.open_interest ?? 0).mul(data?.index_price ?? 0).toDecimalPlaces(2).valueOf()
                            }),
                            rule: "price",
                            hint: "Total size of positions per side."
                        }),
                        /*#__PURE__*/ _jsx("div", {
                            ref: tailingElementRef,
                            className: "orderly-pr-[20px]"
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx(TickerMask, {
                    leading: true,
                    visible: leadingVisible,
                    onClick: onScollButtonClick
                }),
                /*#__PURE__*/ _jsx(TickerMask, {
                    tailing: true,
                    visible: tailingVisible,
                    onClick: onScollButtonClick
                })
            ]
        })
    });
};

//# sourceMappingURL=ticker.js.map