import React from 'react'
import ReactDOM from 'react-dom/client'
import { configure } from 'mobx'
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom'
import { AuthContext } from '@/stores/AuthContext'
import { ThemeContext } from '@/stores/ThemeContext'
import Auth from '@/stores/Auth'
import App from '@/views/App'
import Standlone from '@/views/Standlone'
import OrderFollow from '@/views/OrderFollow'
import ChatHistory from '@/views/ChatHistory'
import SalesManagement from '@/views/SalesManagement'
import DingdingQRCode from '@/views/DingdingQRCode'
import DingdingCallbak from '@/views/DingdingCallbak'
import AccountProfile from '@/views/AccountProfile'
import ErrorPage from '@/views/ErrorPage'

configure({
  useProxies: 'ifavailable',
  enforceActions: 'observed',
  computedRequiresReaction: true,
  observableRequiresReaction: false,
  reactionRequiresObservable: true,
  disableErrorBoundaries: process.env.NODE_ENV == 'production'
})

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
    children: [      
      { index: true, element: <OrderFollow /> },
    ]
  },
  {
    path: '/s',
    element: <App />,
    children: [      
      { index: true, element: <OrderFollow /> },
      { path: 'order/follow', element: <OrderFollow />},
      { path: 'chat/history', element: <ChatHistory />},
      { path: 'sales/management', element: <SalesManagement />},
      { path: 'account/profile', element: <AccountProfile />},
    ]
  },
  {
    element: <Standlone />,
    children: [
      { path: '/dingding/qrcode', element: <DingdingQRCode /> },
      { path: '/dingding/callback', element: <DingdingCallbak /> },
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  
  // <React.StrictMode>
  <ThemeContext.Provider value={{colorPrimary: '#1ba784', borderRadius: 4}}>
    <AuthContext.Provider value={{loginUser: {userId: 1, openId: '123456789'}, permissionList: []}}>
      <RouterProvider
        router={router}
        fallbackElement={() => <div>Loading...</div>}
      />
    </AuthContext.Provider>
  </ThemeContext.Provider>
  // </React.StrictMode>
)