import React from 'react';
import { Route, useRouteMatch, Switch, Redirect } from 'react-router-dom';
import { Layout, Spin } from 'antd';
import { useTranslation } from 'react-i18next';

import { Siderc } from '../Main/Siderc';
import Headerc from '../Main/FuncHeader';
import { authenticationService } from '../../_services';

import './Dashboard.css';

import ErrorHandler from '../ErrorHandler';
import InfoDash from './InfoDash';

// import AddQuestion from '../Questions/AddQuestion';
import AllQuestionNew from '../Questions/AllQuestionNew';
import MyQuestion from '../Questions/MyQuestions';
import Bookmark from '../Questions/Bookmark';
import Draft from '../Questions/DraftQuestion/DraftNew';

import CreateExam from '../Exams/CreateExam';
import CreatePractise from '../Exams/createPractise';
// import CreateQuestion from '../Questions/createQuestionTest';
import CreateQuestion2 from '../Questions/CreateQuestion2';
import RepeatedDataProvider from '../RepeatedDataProvider';
// import { MathJax } from 'better-react-mathjax';
import TranslateQuestion from '../Questions/TranslateQuestion';
// import LivePractice from '../Practice/LivePractice';
// import DraftPractice from '../Practice/DraftPractice';
// import UpcomingPractice from '../Practice/UpcomingPractice';
import DraftPracticeNew from '../Practice/DraftPracticeNew';
import LivePracticeNew from '../Practice/LivePracticeNew';
import UpcomingPracticeNew from '../Practice/UpcomingPracticeNew';
import DraftExamNew from '../Exams/DraftExamNew';
import LiveExamNew from '../Exams/LiveExamNew';
import UpcomingExamNew from '../Exams/UpcomingExamNew';
import ExpiredExamNew from '../Exams/ExpiredExamNew';
// import AssociateBatchPractice from '../Practice/PracticeAssociateBatch';
// import AssociateBatch from '../Exams/AssociateBatch';
import ViewBatch from '../batches/ViewBatch';
import CreateBatchNew from "../batches/CreateBatchNew";
import ViewClass from '../Class/ViewClass';
// import Class from '../Class/CreateClass-re'
import CreateClass from '../Class/CreateClassNew';
import AssociateBatchNew from '../Exams/AssociateBatchNew';
import PracticeAssociateBatchv2 from '../Practice/PracticeAssociateBatchv2';
import Profile from '../Profile';

function Dashboard(props) {

  const { i18n } = useTranslation();

  const { url, path } = useRouteMatch();
  
  const [classLoading, isClassLoading] = React.useState(true);
  const [language, setLanguage] = React.useState([]);

  function tokenGetter() {
    authenticationService.refreshFireToken();
  }

  // console.log(path, url);

  React.useEffect(() => {
    const intervalID = setInterval(() => tokenGetter(), 2220000);
    return () => clearInterval(intervalID);
  }, []);
  
  return (
    // RepeatedDataProvider can block its children from rendering if there is no classes fetched from server.
    <RepeatedDataProvider mathJax={props.mathJax}>
    <Layout>
      <Siderc location={props.location}/>
      <Layout style={{}}>
        <Headerc location={props.location} isClassLoading={isClassLoading} setLanguage={setLanguage} />
        <Layout>
          {!classLoading && <Switch key={i18n.language} >
            <Route exact path={`${url}dashboard`} render={() => <InfoDash />} />
            <Route exact path={`${url}profile-page`} render={() => <Profile />} />
            {/* <Route exact path={`${path}allQuestions`} component={AllQuestions} /> only for testing against the new component */}
            <Route exact path={`${path}allQuestions`} render={() => <AllQuestionNew language={language} />} />
            {/* <Route exact path={`${path}addQuestion`} component={AddQuestion} /> */}
            <Route exact path={`${path}addQuestion`} render={() =>
              <ErrorHandler>
                <CreateQuestion2 language={language} mathJax={props.mathJax}/>
              </ErrorHandler>
            } />
            <Route exact path={`${path}myQuestions`} render={() => <ErrorHandler> <MyQuestion language={language}/> </ErrorHandler>} />
            <Route exact path={`${path}bookmarkQuestions`} render={() => <ErrorHandler> <Bookmark language={language}/> </ErrorHandler>} />
            <Route exact path={`${path}draftQuestions`} render={() => <ErrorHandler> <Draft language={language}/> </ErrorHandler>} />
            {language.length > 0 && <Route exact path={`${path}translateQuestion`} render={() => <ErrorHandler> <TranslateQuestion language={language}/> </ErrorHandler>} />}
            
            <Route exact path={`${path}createExam`} render={() => <ErrorHandler> <CreateExam /> </ErrorHandler>} />
            <Route exact path={`${path}draftExams`} render={() => <ErrorHandler> <DraftExamNew /> </ErrorHandler>} />
            <Route exact path={`${path}liveExam`} render={() => <ErrorHandler> <LiveExamNew /> </ErrorHandler>} />
            <Route exact path={`${path}upcomingExam`} render={() => <ErrorHandler> <UpcomingExamNew /> </ErrorHandler>} />
            <Route exact path={`${path}expiredExams`} render={() => <ErrorHandler> <ExpiredExamNew /> </ErrorHandler>} />

            <Route exact path={`${path}createPractise`} render={() => <ErrorHandler> <CreatePractise /> </ErrorHandler>} />
            <Route exact path={`${path}livePractise`} render={() => <ErrorHandler><LivePracticeNew /></ErrorHandler>} />
            <Route exact path={`${path}draftPractise`} render={() => <ErrorHandler><DraftPracticeNew /></ErrorHandler>} />
            <Route exact path={`${path}upcomingPractise`} render={() => <ErrorHandler><UpcomingPracticeNew /></ErrorHandler>} />
            {/* <Route exact path={`${path}testPractise`} render={() => <ErrorHandler><LivePracticeNew/></ErrorHandler>} /> */}
            
            <Route exact path={`${path}associatePracticeBatch`} render={() => <ErrorHandler><PracticeAssociateBatchv2 location={props.location} /></ErrorHandler>} />
            <Route exact path={`${path}associatebatch`} render={() => <ErrorHandler><AssociateBatchNew location={props.location} /></ErrorHandler>} />
            
            
            <Route exact path={`${path}createbatch`} render={() => <ErrorHandler><CreateBatchNew location={props.location}/></ErrorHandler>} />
            <Route exact path={`${path}viewbatch`} render={() => <ErrorHandler><ViewBatch location={props.location}/></ErrorHandler>} />
            
            <Route exact path={`${path}viewclass`} render={() => <ErrorHandler><ViewClass location={props.location}/></ErrorHandler>} />
            <Route exact path={`${path}class`} render={() => <ErrorHandler><CreateClass location={props.location}/></ErrorHandler>} />
            
            {/* <Route exact path={`${path}testQuest`} render={() => <ErrorHandler><CreateQuestion2 language={language} mathJax={props.mathJax}/></ErrorHandler>} /> */}
            
            
            {/* Redirect route from root to dashboard */}
            <Route exact path={`${url}`} render={ () => <Redirect to={`${url}dashboard`} /> } />
          </Switch>}
          {classLoading && <div style={{textAlign: 'center', marginTop: 50}}><Spin/></div>}
        </Layout>
      </Layout>
    </Layout>
    </RepeatedDataProvider>
  )

};

export default Dashboard;
