import React, { Suspense } from 'react'
import { Route, Routes } from 'react-router-dom'

import { Layout } from './components/Layout'
import { DashboardPage } from './pages/dashboard/DashboardPage'
import { DetailedStatsPage } from './pages/detailed-stats/DetailedStatsPage'
import { TasksListPage } from './pages/tasks/TasksListPage'
import { TaskFormPage } from './pages/tasks/TaskFormPage'
import { ChainsListPage } from './pages/chains/ChainsListPage'
import { ChainFormPage } from './pages/chains/ChainFormPage'
import { UsersPage } from './pages/users/UsersPage'
import { SubmissionsPage } from './pages/submissions/SubmissionsPage'
import { URLs } from './__data__/urls'

const PageWrapper = ({ children }: React.PropsWithChildren) => (
  <Suspense fallback={<div>Loading...</div>}>
    <Layout>{children}</Layout>
  </Suspense>
)

export const Dashboard = () => {
  return (
    <Routes>
      {/* Dashboard */}
      <Route
        path={URLs.dashboard}
        element={
          <PageWrapper>
            <DashboardPage />
          </PageWrapper>
        }
      />

      {/* Detailed Stats */}
      <Route
        path={URLs.detailedStats}
        element={
          <PageWrapper>
            <DetailedStatsPage />
          </PageWrapper>
        }
      />
      <Route
        path={URLs.detailedStatsChainPath}
        element={
          <PageWrapper>
            <DetailedStatsPage />
          </PageWrapper>
        }
      />

      {/* Tasks */}
      <Route
        path={URLs.tasks}
        element={
          <PageWrapper>
            <TasksListPage />
          </PageWrapper>
        }
      />
      <Route
        path={URLs.taskNew}
        element={
          <PageWrapper>
            <TaskFormPage />
          </PageWrapper>
        }
      />
      <Route
        path={URLs.taskEditPath}
        element={
          <PageWrapper>
            <TaskFormPage />
          </PageWrapper>
        }
      />

      {/* Chains */}
      <Route
        path={URLs.chains}
        element={
          <PageWrapper>
            <ChainsListPage />
          </PageWrapper>
        }
      />
      <Route
        path={URLs.chainNew}
        element={
          <PageWrapper>
            <ChainFormPage />
          </PageWrapper>
        }
      />
      <Route
        path={URLs.chainEditPath}
        element={
          <PageWrapper>
            <ChainFormPage />
          </PageWrapper>
        }
      />

      {/* Users */}
      <Route
        path={URLs.users}
        element={
          <PageWrapper>
            <UsersPage />
          </PageWrapper>
        }
      />

      {/* Submissions */}
      <Route
        path={URLs.submissions}
        element={
          <PageWrapper>
            <SubmissionsPage />
          </PageWrapper>
        }
      />
    </Routes>
  )
}