import React, { lazy, Suspense, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ReactGA from 'react-ga';
import HomePage from './components/home';
import LoginPage from './components/login';
import RegisterPage from './components/register';
import CardPage from './components/card';
import LastReviewPage from './components/last-review';
import CheckCardPage from './components/check-card';
import DecksPage from './components/decks';
import StorePage from './components/store';
import OrderPage from './components/order';
import PaymentVerifyPage from './components/payment-verify';
import ForgetPasswordPage from './components/forget-password';
import RankingPage from './components/ranking';
import TermsAndConditionsPage from './components/termsAndConditions';
import DefaultPage from './components/default';
import TopStudentScoresPage from './components/top-scores';
import Loader from './components/shared/loader';

ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID);

import('moment-jalaali').then(moment => {
  moment.default.loadPersian({
    usePersianDigits: false,
    dialect: 'persian-modern'
  });
});

const ScoreChartPage = lazy(() => import('./components/score-chart'));

function App() {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search);
  }, []);

  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Suspense fallback={<Loader />}>
        <Switch>
          <Route exact path='/' component={HomePage} />
          <Route exact path='/login' component={LoginPage} />
          <Route exact path='/register' component={RegisterPage} />
          <Route
            exact
            path='/cards/ch-:chapterId/:cardType(review|new|archived)'
            component={CardPage}
          />
          <Route
            exact
            path='/reviews/last/ch-:chapterId/:type(review|new)'
            component={LastReviewPage}
          />
          <Route exact path='/cards/:cardId/preview' component={CheckCardPage} />
          <Route exact path='/decks' component={DecksPage} />
          <Route exact path='/store' component={StorePage} />
          <Route exact path='/orders/:orderId' component={OrderPage} />
          <Route exact path='/payments/:paymentId/verify' component={PaymentVerifyPage} />
          <Route exact path='/forget-password' component={ForgetPasswordPage} />
          <Route exact path='/ranking/:rankType?' component={RankingPage} />
          <Route
            exact
            path='/top-student-scores/:rankType(weekly|monthly)/:number'
            component={TopStudentScoresPage}
          />
          <Route exact path='/charts/:scoreType(weekly|monthly)' component={ScoreChartPage} />
          <Route exact path='/terms-and-conditions' component={TermsAndConditionsPage} />
          <Route path='*' component={DefaultPage} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;