import React, { useEffect } from 'react';
import { Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

import Menu from './components/Menu';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

// import '@ionic/react/css/palettes/dark.always.css';
// import '@ionic/react/css/palettes/dark.system.css';
import '@ionic/react/css/palettes/dark.class.css';

/* Theme variables */
import './theme/variables.css';

/* Leaflet CSS */
import 'leaflet/dist/leaflet.css';

/* Global styles */
import './App.scss';
import MainTabs from './pages/MainTabs';
import { connect } from './data/connect';
import { AppContextProvider } from './data/AppContext';
import { loadConfData } from './data/sessions/sessions.actions';
import { setIsLoggedIn, setUsername, loadUserData } from './data/user/user.actions';
import Account from './pages/Account';
import Login from './pages/Login';
import MyLogin from './pages/MyLogin';
import Signup from './pages/Signup';
import Support from './pages/Support';
import Tutorial from './pages/Tutorial';
import HomeOrTutorial from './components/HomeOrTutorial';
import { Schedule } from './models/Schedule';
import RedirectToLogin from './components/RedirectToLogin';
import EventDetail from './pages/EventDetail';
import EventList from './pages/EventList';
import MemberProfile from './pages/MemberProfile';
import Settings from './pages/Settings';
import NotImplemented from './pages/NotImplemented';
import ChangeLanguage from './pages/ChangeLanguage';
import ServiceAgreement from './pages/ServiceAgreement';
import paths from './paths';
import PrivacyAgreement from './pages/PrivacyAgreement';
import AppRoute from './AppRoute';
//
// TODO: resume DemoReactShop
// import DemoReactShop from './pages/DemoReactShop';
import DemoWeatherApp from './pages/DemoWeatherApp';
import DemoClubHouse from './pages/DemoClubHouse';
import DemoScoreBoard from './pages/DemoScoreBoard';
import DemoQuoteApp from './pages/DemoQuoteApp';
import DemoQrScanner from './pages/DemoQrScanner';
// DemoShopAppUi
import DemoShopAppUi from './pages/DemoShopAppUi';
// DemoDictionaryApp
import DemoDictionaryApp from './pages/DemoDictionaryApp';
// demo-recipe-app
import DemoRecipeApp from './pages/DemoRecipeApp';

// DemoSlidingProfile
import DemoSlidingProfile from './pages/DemoSlidingProfile';

// DemoQuizApp
import DemoQuizApp from './pages/DemoQuizApp';
import DemoBlogPostUi from './pages/DemoBlogPostUi';
import DemoReactTravelApp from './pages/DemoReactTravelApp';
import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
import DemoReactPollApp from './pages/DemoReactPollApp';
import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
import Demo2FaExample from './pages/Demo2FaExample';
import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
import DemoBankingUi from './pages/DemoBankingUi';
import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
import DemoColorTutorial from './pages/DemoColorTutorial';

setupIonicReact();

const App: React.FC = () => {
  return (
    <AppContextProvider>
      <IonicAppConnected />
    </AppContextProvider>
  );
};

interface StateProps {
  darkMode: boolean;
  schedule: Schedule;
}

interface DispatchProps {
  loadConfData: typeof loadConfData;
  loadUserData: typeof loadUserData;
  setIsLoggedIn: typeof setIsLoggedIn;
  setUsername: typeof setUsername;
}

interface IonicAppProps extends StateProps, DispatchProps {}

const IonicApp: React.FC<IonicAppProps> = ({
  darkMode,
  schedule,
  setIsLoggedIn,
  setUsername,
  loadConfData,
  loadUserData,
}) => {
  useEffect(() => {
    loadUserData();
    loadConfData();

    // eslint-disable-next-line
  }, []);

  return schedule.groups.length === 0 ? (
    <div></div>
  ) : (
    <IonApp className={`${darkMode ? 'ion-palette-dark' : ''} noto-sans-hk-body`}>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            {/*
              We use IonRoute here to keep the tabs state intact,
              which makes transitions between tabs and non tab pages smooth
            */}

            <AppRoute />

            <Route path="/tabs" render={() => <MainTabs />} />
            <Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}

            <Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}
            {/*  */}

            <Route path={paths.DEMO_BANKING_UI} render={() => <DemoBankingUi />} />
            <Route
              path={paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL}
              render={() => <DemoCapacitorGoogleMapsTutorial />}
            />

            <Route path={paths.DEMO_COLOR_TUTORIAL} render={() => <DemoColorTutorial />} />

            {/*
              <Route path={paths.DEMO_ECOMMERCE_EXAMPLE} render={() => <DemoEcommerceExample />} />
              <Route path={paths.DEMO_FACEBOOK_CLONE} render={() => <DemoFacebookClone />} />
              <Route path={paths.DEMO_FAST_FOOD_APP} render={() => <DemoFastFoodApp />} />
              <Route path={paths.DEMO_FLOATING_TABS} render={() => <DemoFloatingTabs />} />
              <Route path={paths.DEMO_INSTAGRAM_CLONE} render={() => <DemoInstagramClone />} />
              <Route path={paths.DEMO_KANBAN_BOARD} render={() => <DemoKanbanBoard />} />
              <Route path={paths.DEMO_ORDERING_APP} render={() => <DemoOrderingApp />} />
              <Route path={paths.DEMO_PROFILE_EXAMPLE} render={() => <DemoProfileExample />} />
              <Route path={paths.DEMO_PULLSTATE_TUTORIAL} render={() => <DemoPullstateTutorial />} />
              <Route path={paths.DEMO_REACT_ADD_TO_CART} render={() => <DemoReactAddToCart />} />
              <Route path={paths.DEMO_REACT_CALCULATOR} render={() => <DemoReactCalculator />} />
              <Route path={paths.DEMO_REACT_DRAWING_CANVAS} render={() => <DemoReactDrawingCanvas />} />
              <Route path={paths.DEMO_REACT_HOOK_FORM_EXAMPLE} render={() => <DemoReactHookFormExample />} />
              <Route path={paths.DEMO_REACT_ITEM_LIST} render={() => <DemoReactItemList />} />
              <Route path={paths.DEMO_REACT_LIFECYCLES} render={() => <DemoReactLifecycles />} />
              <Route path={paths.DEMO_REACT_LOGIN} render={() => <DemoReactLogin />} />
              <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} />
              <Route path={paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA} render(() => <DemoReactMovieAppWithAlgolia />} />
              <Route path={paths.DEMO_REACT_NOTES} render={() => <DemoReactNotes />} />
              <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} />
              <Route path={paths.DEMO_REACT_PROFILE_DASHBOARD_UI} render(() => <DemoReactProfileDashboardUI />} />
              <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQRCode />} />
              <Route path={paths.DEMO_REACT_QUOTES} render(() => <DemoReactQuotes />} />
              <Route path={paths.DEMO_REACT_SHOP_UI} render(() => <DemoReactShopUI />} />
              <Route path={paths.DEMO_REACT_TABS_MENUS_CUSTOM} render(() => <DemoReactTabsMenusCustom />} />
              <Route path={paths.DEMO_REACT_THEME_SWITCHER} render(() => <DemoReactThemeSwitcher />} />
              <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render(() => <DemoReactWhatsAppClone />} />
              <Route path={paths.DEMO_SKELETON_TEXT} render(() => <DemoSkeletonText />} />
              <Route path={paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE} render(() => <DemoStickyBottomSheetExample />} />
              <Route path={paths.DEMO_STORAGE_EXAMPLE} render(() => <DemoStorageExample />} />
              <Route path={paths.DEMO_SWIPERJS_TUTORIAL} render(() => <DemoSwiperjsTutorial />} />
              <Route path={paths.DEMO_WEATHER_APP_UI} render(() => <DemoWeatherAppUI />} />
               */}

            <Route path={paths.DEMO_2FA_EXAMPLE} render={() => <Demo2FaExample />} />

            {/* have problemx` */}
            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}

            <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />

            <Route path={paths.DEMO_BLOG_POST_UI} render={() => <DemoBlogPostUi />} />
            <Route path={paths.DEMO_CLUB_HOUSE} render={() => <DemoClubHouse />} />
            <Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
            <Route
              path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR}
              render={() => <DemoPinterestFloatingTabBar />}
            />
            <Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
            <Route path={paths.DEMO_QUIZ_APP} render={() => <DemoQuizApp />} />
            <Route path={paths.DEMO_QUOTE_APP} render={() => <DemoQuoteApp />} />
            <Route path={paths.DEMO_REACT_OVERLAY_HOOKS} render={() => <DemoReactOverlayHooks />} />
            <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />

            {/* TODO: resume DemoReactShop */}
            {/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}

            <Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
            <Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
            <Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />
            <Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
            <Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
            <Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
            <Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />

            <Route path="/account" component={Account} />
            <Route path="/login" component={Login} />
            <Route path="/mylogin" component={MyLogin} />

            <Route path="/signup" component={Signup} />
            <Route path="/support" component={Support} />
            <Route path="/tutorial" component={Tutorial} />

            <Route
              path="/logout"
              render={() => {
                return <RedirectToLogin setIsLoggedIn={setIsLoggedIn} setUsername={setUsername} />;
              }}
            />
            <Route path="/" component={HomeOrTutorial} exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

const IonicAppConnected = connect<{}, StateProps, DispatchProps>({
  mapStateToProps: (state) => ({
    darkMode: state.user.darkMode,
    schedule: state.data.schedule,
  }),
  mapDispatchToProps: {
    loadConfData,
    loadUserData,
    setIsLoggedIn,
    setUsername,
  },
  component: IonicApp,
});