import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { ellipse, square, triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Lesson from './pages/Lesson/index';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';
import Setting from './pages/Setting';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* import '@ionic/react/css/palettes/dark.always.css'; */
/* import '@ionic/react/css/palettes/dark.class.css'; */
import '@ionic/react/css/palettes/dark.system.css';

/* Theme variables */
import './theme/variables.css';
import LessonSequencing from './pages/Sequencing';
import QuizzesMainMenu from './pages/QuizzesMainMenu';
import DebugPage from './pages/debug';
import { RouteConfig } from './RouteConfig';

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>{RouteConfig()}</IonRouterOutlet>
        <IonTabBar slot='bottom'>
          {/* 
          <IonTabButton tab="tab1" href="/lesson">
            <IonIcon aria-hidden="true" icon={triangle} />
            <IonLabel>Lesson</IonLabel>
          </IonTabButton> 
          */}
          <IonTabButton tab='lesson' href='/lesson'>
            <IonIcon aria-hidden='true' icon={triangle} />
            <IonLabel>Lesson</IonLabel>
          </IonTabButton>
          {/* 
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon aria-hidden="true" icon={ellipse} />
            <IonLabel>Quiz</IonLabel>
          </IonTabButton> 
          */}
          <IonTabButton tab='quiz' href='/quizzes_main_menu'>
            <IonIcon aria-hidden='true' icon={ellipse} />
            <IonLabel>Quiz</IonLabel>
          </IonTabButton>
          {/* 
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon aria-hidden="true" icon={square} />
            <IonLabel>Tab3</IonLabel>
          </IonTabButton> 
          */}
          <IonTabButton tab='record' href='/record'>
            <IonIcon aria-hidden='true' icon={square} />
            <IonLabel>Record</IonLabel>
          </IonTabButton>
          <IonTabButton tab='setting' href='/setting'>
            <IonIcon aria-hidden='true' icon={square} />
            <IonLabel>Setting</IonLabel>
          </IonTabButton>
          <IonTabButton tab='debug' href='/debug'>
            <IonIcon aria-hidden='true' icon={square} />
            <IonLabel>Debug</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;
