// REQ0116/main-tab

import React from 'react';
import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
import { Route, Redirect } from 'react-router';
import { calendar, location, informationCircle, people } from 'ionicons/icons';
import SchedulePage from './SchedulePage';
import SpeakerList from './SpeakerList';
import SpeakerDetail from './SpeakerDetail';
import SessionDetail from './SessionDetail';
import MapView from './MapView';
import About from './About';
import EventList from './EventList';
import MembersNearByList from './MembersNearByList';
import OrderList from './OrderList';
import MyProfile from './MyProfile';
import MessageList from './MessageList';
import PATHS from '../PATHS';
import Favourites from './Favourites';
import Helloworld from './Helloworld';
import TabAppRoute from '../TabAppRoute';

interface MainTabsProps {}

const MainTabs: React.FC<MainTabsProps> = () => {
  return (
    <IonTabs>
      <IonRouterOutlet>
        {/* REQ0117/default-route */}
        <Redirect exact path="/tabs" to="/tabs/events" />
        {/*
          Using the render method prop cuts down the number of renders your components will have due to route changes.
          Use the component prop when your component depends on the RouterComponentProps passed in automatically.
        */}
        <Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
        <Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
        <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} />

        <Route path="/tabs/schedule/:id" component={SessionDetail} />
        <Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
        <Route path="/tabs/map" render={() => <MapView />} exact={true} />

        <Route path="/tabs/about" render={() => <About />} exact={true} />
        <Route path="/tabs/helloworld" render={() => <Helloworld />} exact={true} />

        {/*  */}
        <TabAppRoute />
      </IonRouterOutlet>
      {/*  */}
      <IonTabBar slot="bottom">
        {/*
        <IonTabButton tab="speakers" href={'/tabs/speakers'}>
          <IonIcon icon={calendar} />
          <IonLabel>Speakers</IonLabel>
        </IonTabButton>
        */}

        <IonTabButton tab="events" href={PATHS.EVENT_LIST}>
          <IonIcon icon={calendar} />
          <IonLabel>Event</IonLabel>
        </IonTabButton>
        <IonTabButton tab="nearby" href={PATHS.NEARBY_LIST}>
          <IonIcon icon={people} />
          <IonLabel>Nearby</IonLabel>
        </IonTabButton>
        <IonTabButton tab="orders" href={PATHS.ORDERS_LIST}>
          <IonIcon icon={location} />
          <IonLabel>Order</IonLabel>
        </IonTabButton>
        <IonTabButton tab="message" href={PATHS.MESSAGE_LIST}>
          <IonIcon icon={informationCircle} />
          <IonLabel>Message</IonLabel>
        </IonTabButton>
        <IonTabButton tab="my_profile" href={PATHS.PROFILE}>
          <IonIcon icon={informationCircle} />
          <IonLabel>Profile</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

export default MainTabs;