import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef, useState } from "react";
import { DesktopBids } from "./bids.desktop";
import { DesktopAsks } from "./asks.desktop";
import { DesktopMarkPrice } from "./markPrice.desktop";
import { OrderBookProvider } from "../../../block/orderbook/orderContext";
import { Spinner } from "../../../spinner";
import { cn } from "../../../utils/css";
import { DesktopHeader } from "./header.desktop";
import { DesktopDepthSelect } from "./depthSelect.desktop";
export const DesktopOrderBook = (props)=>{
    const { lastPrice, markPrice, quote, base, isLoading, onDepthChange } = props;
    // const onModeChange = useCallback((mode: QtyMode) => {}, []);
    //
    const divRef = useRef(null);
    const [showTotal, setShowTotal] = useState(false);
    const rangeInfo = [
        {
            left: 370,
            right: 600
        },
        {
            left: 740,
            right: 800
        }
    ];
    useEffect(()=>{
        const resizeObserver = new ResizeObserver((entries)=>{
            for (let entry of entries){
                const { inlineSize: width } = entry.borderBoxSize[0];
                const count = rangeInfo.reduce((a, b)=>a + (width >= b.left && width < b.right ? 1 : 0), 0);
                setShowTotal(()=>count > 0);
            }
        });
        const targetDiv = divRef.current;
        if (targetDiv) {
            resizeObserver.observe(targetDiv);
        }
        return ()=>{
            if (targetDiv) {
                resizeObserver.unobserve(targetDiv);
            }
        };
    }, []);
    /// 
    return /*#__PURE__*/ _jsx(OrderBookProvider, {
        cellHeight: props.cellHeight ?? 20,
        onItemClick: props.onItemClick,
        depth: props.activeDepth,
        showTotal: showTotal,
        pendingOrders: props.pendingOrders || [],
        children: /*#__PURE__*/ _jsxs("div", {
            id: "orderly-orderbook-desktop",
            className: cn("orderly-h-full orderly-relative", props.className),
            ref: divRef,
            children: [
                /*#__PURE__*/ _jsx(DesktopDepthSelect, {
                    depth: props.depth,
                    value: props.activeDepth,
                    onChange: onDepthChange
                }),
                /*#__PURE__*/ _jsx(DesktopHeader, {
                    quote: quote,
                    base: base
                }),
                /*#__PURE__*/ _jsx(DesktopAsks, {
                    data: [
                        ...props.asks
                    ]
                }),
                /*#__PURE__*/ _jsx(DesktopMarkPrice, {
                    lastPrice: lastPrice,
                    markPrice: markPrice,
                    asks: [
                        ...props.asks
                    ],
                    bids: [
                        ...props.bids
                    ]
                }),
                /*#__PURE__*/ _jsx(DesktopBids, {
                    data: [
                        ...props.bids
                    ]
                }),
                isLoading && /*#__PURE__*/ _jsx("div", {
                    className: "orderly-absolute orderly-left-0 orderly-top-0 orderly-right-0 orderly-bottom-0 orderly-z-10 orderly-flex orderly-items-center orderly-justify-center orderly-bg-base-800/70 orderly-h-full orderly-min-h-[420px]",
                    children: /*#__PURE__*/ _jsx(Spinner, {})
                })
            ]
        })
    });
};

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