"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "DesktopTradingPage", {
    enumerable: true,
    get: function() {
        return DesktopTradingPage;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _reactsplit = /*#__PURE__*/ _interop_require_default(require("@uiw/react-split"));
const _accountInfo = require("./elements/accountInfo");
const _orderEntry = require("../mobile/sections/orderEntry");
const _topNav = require("./sections/nav/topNav");
const _orderbook_trade = require("./sections/orderbook_trade");
const _datalist = require("./sections/datalist");
const _myTradingview = require("./myTradingview");
const _assetsProvider = require("../../../provider/assetsProvider");
const _useCSSVariable = require("../../../hooks/useCSSVariable");
const _layoutContext = require("../../../layout/layoutContext");
const _tradingPageContext = require("../context/tradingPageContext");
const _useSplitPersistent = require("./useSplitPersistent");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const DesktopTradingPage = (props)=>{
    // const {} = useLayoutMeasure();
    const { siderWidth, pageHeaderHeight, headerHeight, footerHeight } = (0, _react.useContext)(_layoutContext.LayoutContext);
    const [mainSplitSize, setMainSplitSize] = (0, _useSplitPersistent.useSplitPersistent)("mainSplitSize", "300px");
    const [dataListSplitSize, setDataListSplitSize] = (0, _useSplitPersistent.useSplitPersistent)("dataListSplitSize", "350px");
    const [orderBookSplitSize, setOrderbookSplitSize] = (0, _useSplitPersistent.useSplitPersistent)("orderBookSplitSize", "370px");
    const { disableFeatures } = (0, _tradingPageContext.useTradingPageContext)();
    if (!disableFeatures) {
        throw new Error("TradingPage must be use in TradingPageProvider");
    }
    const cssVariable = (0, _useCSSVariable.useCSSVariable)([
        "--orderly-color-primary",
        "--orderly-color-divider"
    ]);
    (0, _react.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
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
        className: "orderly-tabular-nums",
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactsplit.default, {
            lineBar: true,
            style: {
                height: `calc(100vh - ${headerHeight + footerHeight + (pageHeaderHeight ?? 0)}px)`,
                minHeight: "990px"
            },
            onDragEnd: (preSize, nextSize, paneNumber)=>{
                setMainSplitSize(`${nextSize}`);
            },
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    style: {
                        flex: 1
                    },
                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactsplit.default, {
                        mode: "vertical",
                        lineBar: true,
                        onDragEnd: (_, height, num)=>{
                            setDataListSplitSize(`${height}`);
                        },
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactsplit.default, {
                                style: {
                                    flex: 1,
                                    minHeight: "450px"
                                },
                                className: "orderly-min-h-0 orderly-overflow-y-visible",
                                lineBar: true,
                                onDragEnd: (_, width, num)=>{
                                    setOrderbookSplitSize(`${width}`);
                                },
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                        style: {
                                            flex: 1,
                                            minWidth: "468px"
                                        },
                                        className: "orderly-grid orderly-grid-rows-[48px_1fr]",
                                        children: [
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                className: "orderly-border-b orderly-border-b-divider orderly-min-w-0",
                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_topNav.TopNav, {
                                                    symbol: props.symbol
                                                })
                                            }),
                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                className: "orderly-flex-1",
                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_myTradingview.MyTradingView, {
                                                    symbol: props.symbol,
                                                    tradingViewConfig: props.tradingViewConfig
                                                })
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                        style: {
                                            minWidth: "300px",
                                            maxWidth: "800px",
                                            width: orderBookSplitSize
                                        },
                                        className: "orderly-overflow-hidden",
                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_orderbook_trade.MyOrderBookAndTrade, {
                                            symbol: props.symbol
                                        })
                                    })
                                ]
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                style: {
                                    height: dataListSplitSize,
                                    minHeight: "350px"
                                },
                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_datalist.MemoizedDataListView, {})
                            })
                        ]
                    })
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    style: {
                        minWidth: "300px",
                        maxWidth: "500px",
                        minHeight: "990px",
                        width: mainSplitSize
                    },
                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_assetsProvider.AssetsProvider, {
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_accountInfo.AccountInfoElement, {}),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                className: "orderly-px-3 orderly-mt-3 orderly-z-30",
                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_orderEntry.MyOrderEntry, {
                                    symbol: props.symbol
                                })
                            })
                        ]
                    })
                })
            ]
        })
    });
};

//# sourceMappingURL=trading.js.map