import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom'
import { lazy, memo, Suspense } from 'react'
import locale from 'antd/lib/locale/ru_RU'
import { ConfigProvider } from 'antd'

import { RootPathContext } from '@asb/context'
import SuspenseFallback from '@components/SuspenseFallback'
import { getUser, NoAccessComponent } from '@utils'
import { OpenAPI } from '@api'

import '@styles/include/antd_theme.less'
import '@styles/App.less'

const UserOutlet = lazy(() => import('@components/outlets/UserOutlet'))
const DepositsOutlet = lazy(() => import('@components/outlets/DepositsOutlet'))
const LayoutPortal = lazy(() => import('@components/LayoutPortal'))

const Login = lazy(() => import('@pages/public/Login'))
const Register = lazy(() => import('@pages/public/Register'))
const FileDownload = lazy(() => import('@pages/FileDownload'))

const AdminPanel = lazy(() => import('@pages/AdminPanel'))
const Deposit = lazy(() => import('@pages/Deposit'))
const Cluster = lazy(() => import('@pages/Cluster'))
const Well = lazy(() => import('@pages/Well'))

// OpenAPI.BASE = 'http://localhost:3000'
// TODO: Удалить взятие из 'token' в следующем релизе, вставлено для совместимости
OpenAPI.TOKEN = async () => getUser().token || localStorage.getItem('token') || ''
OpenAPI.HEADERS = { 'Content-Type': 'application/json' }

export const App = memo(() => (
    <ConfigProvider locale={locale}>
        <RootPathContext.Provider value={''}>
            <Suspense fallback={<SuspenseFallback style={{ minHeight: '100vh' }} />}>
                <Router>
                    <Routes>
                        <Route index element={<Navigate to={'deposit'} replace />} />
                        <Route path={'*'} element={<NoAccessComponent />} />

                        {/* Public pages */}
                        <Route path={'/login'} element={<Login />} />
                        <Route path={'/register'} element={<Register />} />

                        {/* User pages */}
                        <Route element={<UserOutlet />}>
                            <Route path={'/file_download/:idFile/*'} element={<FileDownload />} />

                            <Route element={<DepositsOutlet />}>
                                <Route element={<LayoutPortal />}>
                                    {/* Admin pages */}
                                    <Route path={'/admin/*'} element={<AdminPanel />} />

                                    {/* Client pages */}
                                    <Route path={'/deposit/*'} element={<Deposit />} />
                                    <Route path={'/cluster/:idCluster'} element={<Cluster />} />
                                    <Route path={'/well/:idWell/*'} element={<Well />} />
                                </Route>
                            </Route>
                        </Route>
                    </Routes>
                </Router>
            </Suspense>
        </RootPathContext.Provider>
    </ConfigProvider>
))

export default App
