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

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

// import Tab1 from './AppPages/Tab1';
// import Tab2 from './AppPages/Tab2';

import Home from './pages/Home';
import { fetchData } from './data/fetcher';
import CategoryProducts from './pages/CategoryProducts';
import Product from './pages/Product';
import FavouriteProducts from './pages/FavouriteProducts';
import CartProducts from './pages/CartProducts';

import './style.scss';
import React, { useEffect } from 'react';

function DemoEcommerceExample(): React.JSX.Element {
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/demo-ecommerce-example/home" exact={true}>
          <Home />
        </Route>

        <Route path="/demo-ecommerce-example/favourites" exact>
          <FavouriteProducts />
        </Route>

        <Route path="/demo-ecommerce-example/cart" exact>
          <CartProducts />
        </Route>

        <Route path="/demo-ecommerce-example/category/:slug" exact>
          <CategoryProducts />
        </Route>

        <Route path="/demo-ecommerce-example/category/:slug/:id" exact>
          <Product />
        </Route>

        <Redirect exact path="/demo-ecommerce-example" to="/demo-ecommerce-example/home" />
      </IonRouterOutlet>

      {/*  */}
      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" href="/demo-ecommerce-example/tab1">
          <IonIcon icon={cloudOutline} />
          <IonLabel>Dashboard</IonLabel>
        </IonTabButton>
        <IonTabButton tab="tab2" href="/demo-ecommerce-example/tab2">
          <IonIcon icon={searchOutline} />
          <IonLabel>Search</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
}

export default DemoEcommerceExample;