import { IonRouterOutlet, IonTabs } from '@ionic/react';

import { Route, Redirect } from 'react-router';

import './theme/variables.scss';

import Tabs from './components/Tabs';
import Homepage from './pages/Home';
import ViewCoffee from './pages/ViewCoffee';
import ViewCoffees from './pages/ViewCoffees';
import React from 'react';

function DemoOrderingApp(): React.JSX.Element {
  return (
    <IonTabs className="demo-ordering-app">
      <IonRouterOutlet>
        <Route path="/demo-ordering-app/tabs" render={() => <Tabs />} />
        <Route
          exact={false}
          path="/demo-ordering-app/coffee/:id"
          render={(props) => <ViewCoffee {...props} />}
        />
        <Route
          exact={false}
          path="/demo-ordering-app/coffees"
          render={(props) => <ViewCoffees {...props} />}
        />
        <Route
          exact={false}
          path="/demo-ordering-app/coffees/:from_search"
          render={(props) => <ViewCoffees {...props} />}
        />

        <Route path="/demo-ordering-app/" component={Homepage} exact={true} />
        <Redirect exact from="/demo-ordering-app/" to="/demo-ordering-app/tabs/home" />
      </IonRouterOutlet>
    </IonTabs>
  );
}

export default DemoOrderingApp;