import React, { Suspense, useEffect } from "react"
import { Layout, ConfigProvider, theme, Spin } from "antd"
import {
  BrowserRouter,
  Route,
  Routes,
  Navigate,
  Outlet,
} from "react-router-dom"
import { observer } from "mobx-react-lite"
import { RoutePath } from "@/interfaces"
import Dashboard from "@/pages/Dashboard"
import { useStore } from "@/stores"
import styles from "./app.module.less"

const { Content, Footer } = Layout

const Mine = React.lazy(() => import("@/pages/Mine"))
const NotFound = React.lazy(() => import("@/components/NotFound"))

function App() {
  return (
    <BrowserRouter>
      <Layout className={styles.layout}>
        <Content className={styles.content}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/:labId" element={<Outlet />}>
              <Route path={RoutePath.Mine} element={<Mine />} />
              <Route
                index
                element={<Navigate to={RoutePath.Mine} replace={true} />}
              />
              <Route path="*" element={<NotFound />} />
            </Route>
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Content>
        <Footer style={{ textAlign: "center" }}>footer</Footer>
      </Layout>
    </BrowserRouter>
  )
}

export default observer(function AppProvider() {
  const { pageLoading, setPageLoading } = useStore().common

  useEffect(() => {
    setTimeout(() => setPageLoading(false), 1000)
  }, [])

  return (
    <Suspense fallback={null}>
      <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
        <Spin spinning={pageLoading}>
          <App />
        </Spin>
      </ConfigProvider>
    </Suspense>
  )
})