import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { TabPane, Tabs } from "../../../../../tab";
import { TradeHistoryPane } from "./tradeHistory";
import { useState } from "react";
import { TradeData } from "./tradeData";
import { ChevronDown } from "lucide-react";
import { useLocalStorage, useConfig } from "@orderly.network/hooks";
import { SymbolProvider } from "../../../../../provider";
import { cn } from "../../../../../utils/css";
import MyTradingView from "../../../../../page/trading/mobile/sections/chartView/myTradingView";
export const ChartView = (props)=>{
    const { symbol, tradingViewConfig } = props;
    const [activeTab, setActiveTab] = useState("tradingView");
    const apiBaseUrl = useConfig("apiBaseUrl");
    const [collapsed, setCollapsed] = useLocalStorage("orderly:chart:collapsed", true);
    return /*#__PURE__*/ _jsx("div", {
        id: "orderly-chart-view-tabs",
        className: "orderly-text-3xs",
        children: /*#__PURE__*/ _jsxs(Tabs, {
            showIdentifier: false,
            value: activeTab,
            onTabChange: setActiveTab,
            tabBarClassName: "orderly-h-[40px]",
            collapsed: collapsed,
            // @ts-ignore
            onToggleCollapsed: ()=>setCollapsed((prev)=>!prev),
            tabBarExtra: (context)=>{
                return /*#__PURE__*/ _jsx("div", {
                    className: "orderly-flex orderly-items-center",
                    children: /*#__PURE__*/ _jsx("button", {
                        className: "orderly-px-5",
                        onClick: ()=>{
                            context.toggleContentVisible();
                        },
                        children: /*#__PURE__*/ _jsx(ChevronDown, {
                            size: 18,
                            className: cn("orderly-transition-transform orderly-text-base-contrast/50", context.contentVisible ? "orderly-rotate-180" : "orderly-rotate-0")
                        })
                    })
                });
            },
            children: [
                /*#__PURE__*/ _jsx(TabPane, {
                    title: "Chart",
                    value: "tradingView",
                    children: /*#__PURE__*/ _jsx(MyTradingView, {
                        symbol: symbol,
                        tradingViewConfig: tradingViewConfig
                    })
                }),
                /*#__PURE__*/ _jsx(TabPane, {
                    title: "Trade",
                    value: "tradeHistory",
                    children: /*#__PURE__*/ _jsx("div", {
                        className: "orderly-h-[240px] orderly-overflow-y-auto",
                        children: /*#__PURE__*/ _jsx(SymbolProvider, {
                            symbol: symbol,
                            children: /*#__PURE__*/ _jsx("div", {
                                className: "orderly-px-[16px]",
                                children: /*#__PURE__*/ _jsx(TradeHistoryPane, {
                                    symbol: symbol
                                })
                            })
                        })
                    })
                }),
                /*#__PURE__*/ _jsx(TabPane, {
                    title: "Data",
                    value: "tradeData",
                    children: /*#__PURE__*/ _jsx(SymbolProvider, {
                        symbol: symbol,
                        children: /*#__PURE__*/ _jsx(TradeData, {
                            symbol: symbol
                        })
                    })
                })
            ]
        })
    });
};

//# sourceMappingURL=index.js.map