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

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

import All from './AppPages/All';
import ActionSheet from './AppPages/ActionSheet';
import Alert from './AppPages/Alert';
import Loading from './AppPages/Loading';
import Modal from './AppPages/Modal';
import Picker from './AppPages/Picker';
import Popover from './AppPages/Popover';
import Toast from './AppPages/Toast';
import './style.scss';

function DemoReactOverlayHooks() {
  const pages = [
    { label: 'All', url: '/overlay/all', component: All },
    { label: 'Action Sheet', url: '/overlay/action-sheet', component: ActionSheet },
    { label: 'Alert', url: '/overlay/alert', component: Alert },
    { label: 'Loading', url: '/overlay/loading', component: Loading },
    { label: 'Modal', url: '/overlay/modal', component: Modal },
    { label: 'Picker', url: '/overlay/picker', component: Picker },
    { label: 'Popover', url: '/overlay/popover', component: Popover },
    { label: 'Toast', url: '/overlay/toast', component: Toast },
  ];

  return (
    <IonSplitPane contentId="main">
      <Menu pages={pages} />
      <IonRouterOutlet id="main">
        <Route path="/demo-react-overlay-hooks" exact={true}>
          <Redirect to="/demo-react-overlay-hooks/overlay/all" />
        </Route>

        {pages.map((page, index) => {
          const pageComponent = page.component;

          return (
            <Route
              key={index}
              path={`/demo-react-overlay-hooks${page.url}`}
              exact={true}
              component={pageComponent}
            />
          );
        })}
      </IonRouterOutlet>
    </IonSplitPane>
  );
}

export default DemoReactOverlayHooks;