import React, { useEffect, Suspense } from "react";
import { Routes, Route, useNavigate } from "react-router-dom";
import { Provider } from "react-redux";

import {
  CourseListPage,
  LessonDetailsPage,
  LessonListPage,
  UserPage
} from './pages'
import { getNavigationsValue } from "@ijl/cli";

const Redirect = ({ path }) => {
  const navigate = useNavigate();

  useEffect(() => {
    navigate(path);
  }, []);

  return null;
};

const Wrapper = ({ children }) => <Suspense fallback="...">{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>
);
