import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SymbolProvider } from "../../../../../../provider";
import { toast } from "../../../../../../toast";
import { Spinner } from "../../../../../../spinner";
import { useState } from "react";
import { TradingViewSDKLocalstorageKey, TradingView, ChartMode } from "@orderly.network/trading-view";
import TopBar from "./topBar";
export default function MyTradingView({ symbol, tradingViewConfig }) {
    const [interval, setInterval] = useState(()=>{
        const lastUsedInterval = localStorage.getItem(TradingViewSDKLocalstorageKey.interval);
        if (!lastUsedInterval) {
            return "1";
        }
        return lastUsedInterval;
    });
    const [displayControlState, setDisplayControlState] = useState(()=>{
        const displaySettingInfo = localStorage.getItem(TradingViewSDKLocalstorageKey.displayControlSetting);
        if (displaySettingInfo) {
            return JSON.parse(displaySettingInfo);
        }
        return {
            position: true,
            buySell: true,
            limitOrders: true,
            stopOrders: true,
            tpsl: true,
            positionTpsl: true
        };
    });
    const changeInterval = (newInterval)=>{
        localStorage.setItem(TradingViewSDKLocalstorageKey.interval, newInterval);
        setInterval(newInterval);
    };
    const changeDisplaySetting = (newSetting)=>{
        localStorage.setItem(TradingViewSDKLocalstorageKey.displayControlSetting, JSON.stringify(newSetting));
        setDisplayControlState(newSetting);
    };
    return /*#__PURE__*/ _jsx("div", {
        className: "orderly-flex orderly-flex-col orderly-h-[240px]",
        style: {
            position: "relative",
            width: "100%"
        },
        children: /*#__PURE__*/ _jsxs(SymbolProvider, {
            symbol: symbol,
            children: [
                /*#__PURE__*/ _jsx(TopBar, {
                    changeInterval: (interval)=>changeInterval(interval),
                    interval: interval,
                    displayControlState: displayControlState,
                    changeDisplaySetting: changeDisplaySetting
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "orderly-flex-1",
                    children: /*#__PURE__*/ _jsx(TradingView, {
                        mode: ChartMode.MOBILE,
                        symbol: symbol,
                        interval: interval.toString(),
                        libraryPath: tradingViewConfig?.library_path,
                        tradingViewScriptSrc: tradingViewConfig?.scriptSRC,
                        tradingViewCustomCssUrl: tradingViewConfig?.customCssUrl,
                        overrides: tradingViewConfig?.overrides,
                        studiesOverrides: tradingViewConfig?.studiesOverrides,
                        onToast: toast,
                        loadingElement: /*#__PURE__*/ _jsx(Spinner, {}),
                        displayControlSetting: displayControlState,
                        colorConfig: tradingViewConfig?.colorConfig
                    })
                })
            ]
        })
    });
}

//# sourceMappingURL=index.js.map