// REQ102-navigation-bar

import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { calendar, informationCircle, location, people } from 'ionicons/icons';
import React, { useContext } from 'react';
import { Redirect, Route } from 'react-router';
import About from '../About';
import MapView from '../MapView';
import SchedulePage from '../SchedulePage';
import SessionDetail from '../SessionDetail';
import SpeakerDetail from '../SpeakerDetail';
import SpeakerList from '../SpeakerList';

//
import { AppContext } from '../../data/AppContext';
// import Chat from '../chat.del.3';
import Events from '../events';
import FavouriteEvents from '../favourite_events';
import Messages from '../messages';
import NearBy from '../near_by';
import Orders from '../orders';
import Profile from '../profile';
import UserProfile from '../user_profile';

interface MainTabsProps {}

const MainTabs: React.FC<MainTabsProps> = () => {
  const { showBottomTabBar } = useContext(AppContext);

  return (
    <IonTabs>
      <IonRouterOutlet>
        <Redirect exact path="/tabs" to="/tabs/schedule" />
        {/*
          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/events" render={() => <Events />} exact={true} />
        <Route path="/tabs/nearby" render={() => <NearBy />} exact={true} />
        <Route path="/tabs/orders" render={() => <Orders />} exact={true} />
        <Route path="/tabs/messages" render={() => <Messages />} exact={true} />
        <Route path="/tabs/profile" render={() => <Profile />} exact={true} />

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

        {/* FIXME: chat room missing */}
        {/* <Route path="/tabs/chat_history/:id" component={Chat} exact={true} /> */}

        <Route path="/tabs/favourite_events" render={() => <FavouriteEvents />} exact={true} />

        <Route path="/tabs/map" render={() => <MapView />} exact={true} />

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

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

        <Route path="/tabs/user_profile/:user_id" component={UserProfile} exact={true} />
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="events" href="/tabs/events">
          <IonIcon icon={calendar} />
          <IonLabel>{'Events'}</IonLabel>
        </IonTabButton>

        <IonTabButton tab="nearby" href="/tabs/nearby">
          <IonIcon icon={people} />
          <IonLabel>{'NearBy'}</IonLabel>
        </IonTabButton>

        <IonTabButton tab="orders" href="/tabs/orders">
          <IonIcon icon={people} />
          <IonLabel>{'Orders'}</IonLabel>
        </IonTabButton>

        <IonTabButton tab="message" href="/tabs/messages">
          <IonIcon icon={location} />
          <IonLabel>{'Message'}</IonLabel>
        </IonTabButton>

        <IonTabButton tab="profile" href="/tabs/profile">
          <IonIcon icon={informationCircle} />
          <IonLabel>{'Profile'}</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

export default MainTabs;