// REQ0116/main-tab
//
import React, { useEffect, useState } from 'react';
import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel, IonButton } 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 EventList from '../EventList';
import MembersNearByList from '../MembersNearByList';
import OrderList from '../OrderList';
import MyProfile from '../MyProfile';
import MessageList from '../MessageList';
import PATHS from '../../PATHS';
import Favourites from '../Favourites';
import Helloworld from '../Helloworld';
import TabAppRoute from '../../TabAppRoute';
import CarousellMe from '../CarousellMe';
import ServiceMenu from './ServiceMenu';

//
import QRPage from '../tabs/carousell_me/QRPage';

//
import svgIcon1 from './icons/air-conditioning-cooling-heat-temperature-svgrepo-com.svg';
import svgIcon2 from './icons/alert-attention-caution-dangerous-warning-svgrepo-com.svg';
import svgIcon3 from './icons/alert-bell-call-message-sign-svgrepo-com.svg';
import svgIcon4 from './icons/assistance-business-person-reception-service-svgrepo-com.svg';
import svgIcon5 from './icons/bag-baggage-luggage-suitcase-travel-svgrepo-com.svg';
import svgIcon6 from './icons/baggage-bellhop-hotel-service-waiter-svgrepo-com.svg';
import svgIcon7 from './icons/bag-holiday-journey-suitcase-vacation-svgrepo-com.svg';
import svgIcon8 from './icons/banking-financial-money-payment-transaction-svgrepo-com.svg';
import svgIcon9 from './icons/bar-cafe-chair-club-stool-svgrepo-com.svg';
import svgIcon10 from './icons/bath-bathroom-cotton-textile-towel-svgrepo-com.svg';
import svgIcon11 from './icons/bathroom-bathtub-bubble-foam-water-svgrepo-com.svg';
import svgIcon12 from './icons/bathroom-faucet-room-sink-wash-svgrepo-com.svg';
import svgIcon13 from './icons/bed-furniture-interior-pillow-rest-2-svgrepo-com.svg';
import svgIcon14 from './icons/bed-furniture-interior-pillow-rest-3-svgrepo-com.svg';
import svgIcon15 from './icons/bed-furniture-interior-pillow-rest-svgrepo-com.svg';
import svgIcon16 from './icons/book-catalog-document-guidebook-instruction-svgrepo-com.svg';
import svgIcon17 from './icons/business-finance-money-saving-wallet-svgrepo-com.svg';
import svgIcon18 from './icons/cafe-card-food-menu-vintage-svgrepo-com.svg';
import svgIcon19 from './icons/cafe-cup-drink-mug-tea-svgrepo-com.svg';
import svgIcon20 from './icons/calendar-date-day-month-time-svgrepo-com.svg';
import svgIcon21 from './icons/cappuccino-coffee-cup-drink-espresso-2-svgrepo-com.svg';
import svgIcon22 from './icons/cappuccino-coffee-cup-drink-espresso-svgrepo-com.svg';
import svgIcon23 from './icons/card-credit-currency-finance-money-svgrepo-com.svg';
import svgIcon24 from './icons/card-door-key-lock-security-svgrepo-com.svg';
import svgIcon25 from './icons/chair-comfortable-decoration-garden-terrace-svgrepo-com.svg';
import svgIcon26 from './icons/clean-clothing-laundry-washing-wind-svgrepo-com.svg';
import svgIcon27 from './icons/comfortable-fabric-footwear-shoe-slipper-svgrepo-com.svg';
import svgIcon28 from './icons/coupon-entertainment-event-paper-ticket-svgrepo-com.svg';
import svgIcon29 from './icons/door-elevator-entrance-floor-lift-svgrepo-com.svg';
import svgIcon30 from './icons/door-enter-entry-exit-open-svgrepo-com.svg';
import svgIcon31 from './icons/door-entrance-handle-key-security-svgrepo-com.svg';
import svgIcon32 from './icons/door-key-lock-room-security-svgrepo-com.svg';
import svgIcon33 from './icons/electronic-internet-screen-technology-television-svgrepo-com.svg';
import svgIcon34 from './icons/holiday-hotel-journey-service-travel-2-svgrepo-com.svg';
import svgIcon35 from './icons/holiday-hotel-journey-service-travel-svgrepo-com.svg';
import svgIcon36 from './icons/holiday-hotel-motel-sign-travel-svgrepo-com.svg';
import svgIcon37 from './icons/holiday-journey-luggage-suitcase-vacation-2-svgrepo-com.svg';
import svgIcon38 from './icons/hotel-location-map-pin-travel-svgrepo-com.svg';
import getButtonSvg from '../../api/getButtonSvg';
import HotelServiceIntro from '../HotelWelcomeTour';
import HotelIntro from '../HotelIntro';
import HotelServiceWifi from '../HotelServiceIntro';
import OrderHistory from '../OrderHistory';
import Insights from '../Insights';
//

const hotelServiceMenu = [
  { name: '停車場', icon: svgIcon1, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '接機服務', icon: svgIcon2, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '餐廳', icon: svgIcon3, targetUrl: '/tabs/hotel/:hotelid/restaurants' },
  { name: '咖啡室', icon: svgIcon4, targetUrl: '/tabs/restaurant/:restaurant_id/food/:food_id/intro' },
  { name: '酒吧', icon: svgIcon5, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '會議室', icon: svgIcon6, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '托兒服務', icon: svgIcon7, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '茶室', icon: svgIcon8, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '多功能室', icon: svgIcon9, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '商務便利設施', icon: svgIcon10, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '健身室', icon: svgIcon11, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '公共區域 Wi-Fi免費', icon: svgIcon12, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '貨幣兌換', icon: svgIcon13, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: 'wifi', icon: svgIcon14, targetUrl: PATHS.HOTEL_SERVICE_WIFI },
  { name: '叫醒服務', icon: svgIcon16, targetUrl: PATHS.HOTEL_WELCOME_TOUR },
  { name: '關於酒店', icon: svgIcon16, targetUrl: '/tabs/hotel_intro' },
];

interface MainTabsProps {}

const MainTabs: React.FC<MainTabsProps> = () => {
  let [buttonSvg, setButtonSvg] = useState<string | null>(null);

  let [mainTabVisible, setMainTabVisible] = useState<'bottom' | undefined>(undefined);
  let [showCenterButton, setShowCenterButton] = useState(mainTabVisible == 'bottom');

  const hideMainTab = () => {
    setMainTabVisible(undefined);
    setShowCenterButton(false);
  };
  const showMainTab = () => {
    setMainTabVisible('bottom');
    setShowCenterButton(true);
  };

  useEffect(() => {
    getButtonSvg().then((res) => setButtonSvg(res));
  }, []);

  return (
    <div>
      <ServiceMenu buttonSvg={buttonSvg} hotelServiceMenu={hotelServiceMenu} showCenterButton={showCenterButton} />

      {/*  */}
      <IonTabs>
        <IonRouterOutlet>
          {/* REQ0117/default-route */}
          <Redirect exact path="/tabs" to="/tabs/events" />

          {/*
          Using the render method prop cuts down the number of renders your components will have due to route changes.
          Use the component prop when your component depends on the RouterComponentProps passed in automatically.
          */}

          <Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
          <Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
          <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} />

          <Route path="/tabs/schedule/:id" component={SessionDetail} />
          <Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
          <Route path="/tabs/map" render={() => <MapView />} exact={true} />

          <Route path="/tabs/about" render={() => <About />} exact={true} />
          <Route path="/tabs/helloworld" render={() => <Helloworld />} exact={true} />

          {/*  */}
          <Route path={PATHS.CAROUSELL_ME} render={() => <CarousellMe />} exact={true} />
          <Route path={PATHS.CAROUSELL_ME_QR} component={QRPage} exact={true} />
          <Route path={PATHS.CAROUSELL_ME_INSIGHTS} component={Insights} exact={true} />
          {/*
          <Route path="/tabs/carousell_me/OffersMade" component={OffersMade} exact={true} />
          <Route path="/tabs/carousell_me/settings" component={Settings} exact={true} />
          <Route path="/tabs/carousell_me/my_profile" component={MyProfile} exact={true} />
          */}

          <Route path={PATHS.HOTEL_INTRO} component={HotelIntro} exact={true} />
          <Route path={PATHS.HOTEL_SERVICE_WIFI} component={HotelServiceWifi} exact={true} />

          <Route path="/tabs/restaurant/:restaurant_id/order_history" render={() => <OrderHistory />} exact={true} />

          <TabAppRoute />
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          {/*
        <IonTabButton tab="speakers" href={'/tabs/speakers'}>
          <IonIcon icon={calendar} />
          <IonLabel>Speakers</IonLabel>
        </IonTabButton>
        */}

          <IonTabButton tab="events" href={PATHS.EVENT_LIST}>
            <IonIcon icon={calendar} />
            <IonLabel>Event</IonLabel>
          </IonTabButton>
          <IonTabButton tab="nearby" href={PATHS.NEARBY_LIST}>
            <IonIcon icon={people} />
            <IonLabel>Nearby</IonLabel>
          </IonTabButton>
          {/*
        <IonTabButton tab="orders" href={PATHS.ORDERS_LIST}>
          <IonIcon icon={location} />
          <IonLabel>Order</IonLabel>
        </IonTabButton>
         */}
          <IonTabButton disabled></IonTabButton>

          <IonTabButton tab="message" href={PATHS.MESSAGE_LIST}>
            <IonIcon icon={informationCircle} />
            <IonLabel>Message</IonLabel>
          </IonTabButton>
          <IonTabButton tab="my_profile" href={PATHS.PROFILE}>
            <IonIcon icon={informationCircle} />
            <IonLabel>Profile</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </div>
  );
};

export default MainTabs;
