import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect, useRef, useState } from "react";
import Split from "@uiw/react-split";
import { AccountInfoElement } from "./elements/accountInfo";
import { MyOrderEntry } from "../mobile/sections/orderEntry";
import { TopNav } from "./sections/nav/topNav";
import { MyOrderBookAndTrade } from "./sections/orderbook_trade";
import { MemoizedDataListView } from "./sections/datalist";
import MyTradingView from "./myTradingview/index";
import { AssetsProvider } from "../../../provider/assetsProvider";
import { useCSSVariable } from "../../../hooks/useCSSVariable";
import { LayoutContext } from "../../../layout/layoutContext";
import { useTradingPageContext } from "../context/tradingPageContext";
import { useSplitPersistent } from "./useSplitPersistent";
import { Divider } from "../../../divider";
import { cn } from "../../../utils";
export const DesktopTradingPage = (props)=>{
    // const {} = useLayoutMeasure();
    const { siderWidth, pageHeaderHeight, headerHeight, footerHeight, marginModulePosition } = useContext(LayoutContext);
    const containerRef = useRef(null);
    const [entryMaxWidth, setEntryMaxWidth] = useState(500);
    const [mainSplitSize, setMainSplitSize] = useSplitPersistent("mainSplitSize", "300px");
    const [dataListSplitSize, setDataListSplitSize] = useSplitPersistent("dataListSplitSize", "350px");
    const [orderBookSplitSize, setOrderbookSplitSize] = useSplitPersistent("orderBookSplitSize", "370px");
    const { disableFeatures } = useTradingPageContext();
    if (!disableFeatures) {
        throw new Error("TradingPage must be use in TradingPageProvider");
    }
    const cssVariable = useCSSVariable([
        "--orderly-color-primary",
        "--orderly-color-divider"
    ]);
    useEffect(()=>{
        document.body.style.setProperty("--w-split-line-bar-background", // "rgb(42, 46, 52)"
        `rgb(${cssVariable["--orderly-color-divider"]})`);
        document.body.style.setProperty("--w-split-line-bar-active-background", `rgb(${cssVariable["--orderly-color-primary"]})`);
    }, [
        cssVariable
    ]);
    useEffect(()=>{
        const resizeObserver = new ResizeObserver((entries)=>{
            for (let entry of entries){
                const { width, height } = entry.contentRect;
                setEntryMaxWidth(Math.min(width - 768, 500));
            }
        });
        if (containerRef.current) {
            resizeObserver.observe(containerRef.current);
        }
        return ()=>{
            resizeObserver.disconnect();
        };
    }, [
        containerRef
    ]);
    return /*#__PURE__*/ _jsx("div", {
        ref: containerRef,
        className: "orderly-tabular-nums",
        children: /*#__PURE__*/ _jsxs(Split, {
            lineBar: true,
            style: {
                height: `calc(100vh - ${headerHeight + footerHeight + (pageHeaderHeight ?? 0)}px)`,
                minHeight: "990px"
            },
            onDragEnd: (preSize, nextSize, paneNumber)=>{
                setMainSplitSize(`${nextSize}`);
            },
            children: [
                /*#__PURE__*/ _jsx("div", {
                    style: {
                        flex: 1
                    },
                    children: /*#__PURE__*/ _jsxs(Split, {
                        mode: "vertical",
                        lineBar: true,
                        onDragEnd: (_, height, num)=>{
                            setDataListSplitSize(`${height}`);
                        },
                        children: [
                            /*#__PURE__*/ _jsxs(Split, {
                                style: {
                                    flex: 1,
                                    minHeight: "450px"
                                },
                                className: "orderly-min-h-0 orderly-overflow-y-visible",
                                lineBar: true,
                                onDragEnd: (_, width, num)=>{
                                    setOrderbookSplitSize(`${width}`);
                                },
                                children: [
                                    /*#__PURE__*/ _jsxs("div", {
                                        style: {
                                            flex: 1,
                                            minWidth: "468px"
                                        },
                                        className: "orderly-grid orderly-grid-rows-[48px_1fr]",
                                        children: [
                                            /*#__PURE__*/ _jsx("div", {
                                                className: "orderly-border-b orderly-border-b-divider orderly-min-w-0",
                                                children: /*#__PURE__*/ _jsx(TopNav, {
                                                    symbol: props.symbol
                                                })
                                            }),
                                            /*#__PURE__*/ _jsx("div", {
                                                className: "orderly-flex-1",
                                                children: /*#__PURE__*/ _jsx(MyTradingView, {
                                                    symbol: props.symbol,
                                                    tradingViewConfig: props.tradingViewConfig
                                                })
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        style: {
                                            minWidth: "300px",
                                            maxWidth: "800px",
                                            width: orderBookSplitSize
                                        },
                                        className: "orderly-overflow-hidden",
                                        children: /*#__PURE__*/ _jsx(MyOrderBookAndTrade, {
                                            symbol: props.symbol
                                        })
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                style: {
                                    height: dataListSplitSize,
                                    minHeight: "350px"
                                },
                                children: /*#__PURE__*/ _jsx(MemoizedDataListView, {})
                            })
                        ]
                    })
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: cn("orderly-flex orderly-flex-col orderly-justify-start", marginModulePosition === "bottom" && "orderly-flex-col-reverse orderly-justify-end"),
                    style: {
                        minWidth: "300px",
                        maxWidth: `${entryMaxWidth}px`,
                        minHeight: "990px",
                        width: mainSplitSize,
                        position: "relative"
                    },
                    children: /*#__PURE__*/ _jsxs(AssetsProvider, {
                        children: [
                            /*#__PURE__*/ _jsx(AccountInfoElement, {}),
                            /*#__PURE__*/ _jsx(Divider, {
                                className: "orderly-mt-3"
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                className: "orderly-px-3 orderly-mt-4 orderly-z-30",
                                children: /*#__PURE__*/ _jsx(MyOrderEntry, {
                                    symbol: props.symbol
                                })
                            })
                        ]
                    })
                })
            ]
        })
    });
};

//# sourceMappingURL=trading.js.map