import React, { useEffect, Suspense } from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'
import { Provider } from 'react-redux'
import { getNavigationsValue } from '@ijl/cli'
import { Box, Container, Spinner, VStack } from '@chakra-ui/react'

import {
  CourseListPage,
  LessonDetailsPage,
  LessonListPage,
  UserPage,
} from './pages'

const Wrapper = ({ children }: { children: React.ReactElement }) => (
  <Suspense
    fallback={
      <Container>
        <VStack>
          <Box mt="150">
          <Spinner
            thickness="4px"
            speed="0.65s"
            emptyColor="gray.200"
            color="blue.500"
            size="xl"
          /></Box>
        </VStack>
      </Container>
    }
  >
    {children}
  </Suspense>
)

export const Dashboard = ({ store }) => (
  <Provider store={store}>
    <Routes>
      <Route
        path={getNavigationsValue('journal.main')}
        element={
          <Wrapper>
            <CourseListPage />
          </Wrapper>
        }
      />
      <Route
        path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`}
        element={
          <Wrapper>
            <LessonListPage />
          </Wrapper>
        }
      />
      <Route
        path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`}
        element={
          <Wrapper>
            <UserPage />
          </Wrapper>
        }
      />
      <Route
        path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`}
        element={
          <Wrapper>
            <LessonDetailsPage />
          </Wrapper>
        }
      />
    </Routes>
  </Provider>
)