import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';

import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';

// import { AllSubPages, AllTabs, tabRoutes } from './AllRoutes';

import './style.scss';

function DemoReactTravelApp() {
  return <>on hold</>;

  // NOTE: i temporary make it constant to let the program keep develop
  // the below requires fixing, the AllRoutes is not found and it is a
  // jsx file, i want it tsx
  const hello_this_should_be_the_return = (
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/tabs" render={() => <AllTabs />} />
        <AllSubPages />

        <Route path="/" component={tabRoutes.filter((t) => t.default)[0].component} exact={true} />
        <Redirect exact from="/" to={tabRoutes.filter((t) => t.default)[0].path.toString()} />
      </IonRouterOutlet>
    </IonTabs>
  );
}

export default DemoReactTravelApp;