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

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,
  ElectronSpotlightContentPage
} from './components/Dashboard/context/SpotlightContext.jsx'
import { ActionsModalProvider } from './components/Dashboard/context/ActionsModalContext.jsx'
import MissingPlaceholder from './components/Dashboard/common/MissingPlaceholder.jsx'

import {
  ThemeProvider,
  useThemeContext
} from './components/Dashboard/context/ThemeContext'
import AppError from './components/App/AppError'
import { ApiServerProvider } from './components/Dashboard/context/ApiServerContext.jsx'
import { NotificationProvider } from './components/Dashboard/context/NotificationContext.jsx'
import { ElectronProvider } from './components/Dashboard/context/ElectronContext.jsx'
import { MessageProvider } from './components/Dashboard/context/MessageContext.jsx'
import { AppUpdateProvider } from './components/Dashboard/context/AppUpdateContext.jsx'
import AuthCallback from './components/App/AuthCallback.jsx'
import EmailNotificationTemplate from './components/Email/EmailNotificationTemplate.jsx'
import MarketplaceAuthCallback from './components/Dashboard/Sales/Marketplaces/MarketplaceAuthCallback.jsx'
import AuthLaunch from './components/App/AppLaunch.jsx'
const SlicerIntegration = lazy(
  () =>
    import('./components/Dashboard/Production/Printers/SlicerIntegration.jsx')
)

import {
  ProductionRoutes,
  InventoryRoutes,
  FinanceRoutes,
  SalesRoutes,
  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}
      renderEmpty={() => (
        <div style={{ margin: '32px' }}>
          <MissingPlaceholder
            message='No data.'
            hasBackground={false}
            hasBorder={false}
          />
        </div>
      )}
    >
      <App>
        <Router>
          <ElectronProvider>
            <AuthProvider>
              <PrintServerProvider>
                <ApiServerProvider>
                  <MessageProvider>
                    <AppUpdateProvider>
                      <NotificationProvider>
                        <SpotlightProvider>
                          <ActionsModalProvider>
                            <Routes>
                              <Route
                                path='/applaunch'
                                element={<AuthLaunch />}
                              />
                              <Route
                                path='/dashboard/electron/spotlightcontent'
                                element={
                                  <PrivateRoute
                                    component={() => (
                                      <ElectronSpotlightContentPage />
                                    )}
                                  />
                                }
                              />
                              <Route
                                path='/'
                                element={
                                  <PrivateRoute
                                    component={() => (
                                      <Navigate
                                        to='/dashboard/production/overview'
                                        replace
                                      />
                                    )}
                                  />
                                }
                              />
                              <Route
                                path='/auth/callback'
                                element={<AuthCallback />}
                              />
                              <Route
                                path='/auth/marketplace/callback'
                                element={<MarketplaceAuthCallback />}
                              />
                              <Route
                                path='/email/notification'
                                element={<EmailNotificationTemplate />}
                              />
                              <Route
                                path='/slicer'
                                element={<SlicerIntegration />}
                              />

                              <Route
                                path='/dashboard'
                                element={
                                  <PrivateRoute
                                    component={() => <Dashboard />}
                                  />
                                }
                              >
                                {ProductionRoutes}
                                {InventoryRoutes}
                                {FinanceRoutes}
                                {SalesRoutes}
                                {ManagementRoutes}
                                {DeveloperRoutes}
                              </Route>
                              <Route
                                path='*'
                                element={
                                  <AppError
                                    message='Error 404. Page not found.'
                                    showRefresh={false}
                                  />
                                }
                              />
                            </Routes>
                          </ActionsModalProvider>
                        </SpotlightProvider>
                      </NotificationProvider>
                    </AppUpdateProvider>
                  </MessageProvider>
                </ApiServerProvider>
              </PrintServerProvider>
            </AuthProvider>
          </ElectronProvider>
        </Router>
      </App>
    </ConfigProvider>
  )
}

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

export default FarmControlApp
