import {
  HashRouter,
  BrowserRouter,
  Routes,
  Route,
  Navigate
} from 'react-router-dom'
import { App, ConfigProvider } from 'antd'

import Dashboard from './components/Dashboard/Dashboard.jsx'
import PrivateRoute from './components/PrivateRoute'
import '../assets/stylesheets/App.css'
import { PrintServerProvider } from './components/Dashboard/context/PrintServerContext.jsx'
import { AuthProvider } from './components/Dashboard/context/AuthContext.jsx'
import { SpotlightProvider } from './components/Dashboard/context/SpotlightContext.jsx'

import {
  ThemeProvider,
  useThemeContext
} from './components/Dashboard/context/ThemeContext'
import AppError from './components/App/AppError'
import { ApiServerProvider } from './components/Dashboard/context/ApiServerContext.jsx'
import { ElectronProvider } from './components/Dashboard/context/ElectronContext.jsx'
import AuthCallback from './components/App/AuthCallback.jsx'

import {
  ProductionRoutes,
  InventoryRoutes,
  ManagementRoutes,
  DeveloperRoutes
} from './routes'

const getRouter = () => {
  if (
    typeof window !== 'undefined' &&
    window.location.href.includes('index.html')
  ) {
    return HashRouter
  }
  return BrowserRouter
}

const AppContent = () => {
  const { themeConfig } = useThemeContext()
  const Router = getRouter()

  return (
    <ConfigProvider theme={themeConfig}>
      <App>
        <Router>
          <ElectronProvider>
            <AuthProvider>
              <PrintServerProvider>
                <ApiServerProvider>
                  <SpotlightProvider>
                    <Routes>
                      <Route
                        path='/'
                        element={
                          <PrivateRoute
                            component={() => (
                              <Navigate
                                to='/dashboard/production/overview'
                                replace
                              />
                            )}
                          />
                        }
                      />
                      <Route path='/auth/callback' element={<AuthCallback />} />
                      <Route
                        path='/dashboard'
                        element={
                          <PrivateRoute component={() => <Dashboard />} />
                        }
                      >
                        {ProductionRoutes}
                        {InventoryRoutes}
                        {ManagementRoutes}
                        {DeveloperRoutes}
                      </Route>
                      <Route
                        path='*'
                        element={
                          <AppError
                            message='Error 404. Page not found.'
                            showRefresh={false}
                          />
                        }
                      />
                    </Routes>
                  </SpotlightProvider>
                </ApiServerProvider>
              </PrintServerProvider>
            </AuthProvider>
          </ElectronProvider>
        </Router>
      </App>
    </ConfigProvider>
  )
}

const FarmControlApp = () => {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  )
}

export default FarmControlApp