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 PartyUserLogin from './pages/PartyUserLogin';
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 AppDemoRoute from './routes/DemoRoute';
import Settings from './pages/Settings';
import PATHS from './PATHS';
import NotImplemented from './pages/NotImplemented';
import ChangeLanguage from './pages/ChangeLanguage';
import ServiceAgreement from './pages/ServiceAgreement';
import PrivacyAgreement from './pages/PrivacyAgreement';
import EventDetail from './pages/EventDetail';
import MemberProfile from './pages/MemberProfile';
import OrderDetail from './pages/OrderDetail';
import DummyPayPage from './pages/DummyEventPayPage';
import DummyEventPayPage from './pages/DummyEventPayPage';
import PaymentSuccess from './pages/PaymentSuccess';
import PaymentFailed from './pages/PaymentFailed';
import settings from './pages/tabs/carousell_me/settings';

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 }) => {
  // Load initial user and conference data when component mounts
  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
            */}

            <AppDemoRoute />

            <Route path="/tabs" render={() => <MainTabs />} />

            <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 exact={true} path={PATHS.SETTINGS} component={Settings} />
            <Route exact={true} path={PATHS.CHANGE_LANGUAGE} component={ChangeLanguage} />
            <Route exact={true} path={PATHS.SERVICE_AGREEMENT} component={ServiceAgreement} />
            <Route exact={true} path={PATHS.PRIVACY_AGREEMENT} component={PrivacyAgreement} />

            {/* Event and profile detail pages */}

            <Route exact={true} path="/event_detail/:id" component={EventDetail} />

            <Route exact={true} path={PATHS.DUMMY_EVENT_PAY_PAGE} component={DummyEventPayPage} />
            <Route exact={true} path={PATHS.DUMMY_PAY_PAGE} component={DummyPayPage} />
            <Route exact={true} path={PATHS.PAYMENT_SUCCESS} component={PaymentSuccess} />
            <Route exact={true} path={PATHS.PAYMENT_FAILED} component={PaymentFailed} />

            <Route exact={true} path="/profile/:id" component={MemberProfile} />

            {/* component make the ":id" available in the "OrderDetail" */}
            <Route exact={true} path="/order_detail/:id" component={OrderDetail} />

            <Route exact={true} path="/helloworld" component={Helloworld} />

            <Route
              path="/logout"
              render={() => {
                return <RedirectToLogin setIsLoggedIn={setIsLoggedIn} setUsername={setUsername} />;
              }}
            />

            {/* PartyUser */}
            <Route exact={true} path={PATHS.PARTY_USER_SIGN_IN} component={PartyUserLogin} />
            <Route exact={true} path={PATHS.NOT_IMPLEMENTED} component={NotImplemented} />
            <Route exact={true} path={PATHS.CAROUSELL_ME_SETTINGS} component={settings} />

            <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,
});

function Helloworld() {
  return <>helloworld</>;
}