// REQ0116/main-tab

import React, { useRef, useState } from 'react';
import {
  IonTabs,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonIcon,
  IonLabel,
  IonModal,
} from '@ionic/react';
import { Route, Redirect } from 'react-router';
import { calendar, location, informationCircle, people } from 'ionicons/icons';
import SchedulePage from '../SchedulePage';
import SpeakerList from '../SpeakerList';
import SpeakerDetail from '../SpeakerDetail';
import SessionDetail from '../SessionDetail';
import MapView from '../MapView';
import About from '../About';
import PATHS from '../../PATHS';
import TabAppRoute from '../../TabAppRoute';
import { CartStore } from './store';
import { getCartCount } from './store/Selectors';
import { CartModal } from './components/CartModal';

interface MainTabsProps {}

const DemoReactShop: React.FC<MainTabsProps> = () => {
  const cartCount = useStoreState(CartStore, getCartCount);
  const [selected, setSelected] = useState('tab0');
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  const handleClick = (tab) => {
    tab === 'tabCart' ? setOpen(true) : setSelected(tab);
  };

  return (
    <IonTabs>
      <IonRouterOutlet ref={ref}>
        {ReactShopPages.map((page, index) => (
          <Route
            key={`route_${index}`}
            exact={true}
            path={`/demo-react-shop${page.href}`}
            component={page.component}
          />
        ))}

        {/*
        <Route exact path="/demo-react-shop">
          <Redirect to={ReactShopPages.filter((p) => p.default)[0].href} />
        </Route>
        */}
        <Redirect exact path="/demo-react-shop" to="/demo-react-shop/categories" />
      </IonRouterOutlet>
      {/*  */}

      <IonTabBar slot="bottom">
        {ReactShopPages.map((page, index) => {
          const isSelected = selected === `tab${index}`;

          if (page.isTab) {
            return (
              <IonTabButton
                key={`tab${index}`}
                tab={`tab${index}`}
                href={`/demo-react-shop${page.href}`}
              >
                <IonIcon icon={page.icon} />
                {isSelected && <div className="tab-dot" />}
              </IonTabButton>
            );
          } else return null;
        })}

        <IonTabButton tab="tabCart">
          <IonIcon icon={cartOutline} />
          <div className="cart-count">{cartCount}</div>
        </IonTabButton>
      </IonTabBar>

      {/* <IonModal presentingElement={ref.current} isOpen={open} onDidDismiss={() => setOpen(false)}> */}
      {/* <CartModal close={() => setOpen(false)} /> */}
      {/* </IonModal> */}
    </IonTabs>
  );
};

export default DemoReactShop;

import { cartOutline, heartOutline, homeOutline, shirtOutline } from 'ionicons/icons';

import Categories from './Categories';
import Favourites from './Favourites';
import ProductType from './ProductType';
import Category from './Category';
import { useStoreState } from 'pullstate';

export const ReactShopPages = [
  {
    href: '/categories',
    icon: shirtOutline,
    component: Categories,
    default: true,
    isTab: true,
  },
  {
    href: '/categories/:category/:type',
    component: ProductType,
    default: false,
    isTab: false,
  },
  {
    href: '/categories/:category',
    icon: shirtOutline,
    component: Category,
    default: true,
    isTab: false,
  },
  {
    href: '/favourites',
    icon: heartOutline,
    component: Favourites,
    default: false,
    isTab: true,
  },
];