import "antd/dist/antd.css";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Route, Switch } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import ErrorBoundary from "../components/error-boundary/error-boundary.component";
//Component Imports
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import AboutPage from "../pages/about/about.page";
import TechPageContainer from "../pages/tech/tech.page.container";
import { checkUserSession } from "../redux/user/user.actions";
import { selectCurrentUser } from "../redux/user/user.selectors";
import PrivateRoute from "../utils/private-route";
import "./App.styles.scss";

const LandingPage = lazy(() => import("../pages/landing/landing.page"));
const ResetPassword = lazy(() =>
  import("../pages/reset-password/reset-password.component")
);
const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));

const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
const MobilePaymentContainer = lazy(() =>
  import("../pages/mobile-payment/mobile-payment.container")
);

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
  checkUserSession: () => dispatch(checkUserSession()),
});

export function App({ checkUserSession, currentUser }) {
  useEffect(() => {
    checkUserSession();
  }, [checkUserSession]);

  //const b = Grid.useBreakpoint();
  // console.log("Breakpoints:", b);

  const { t } = useTranslation();

  if (currentUser.authorized === null) {
    return <LoadingSpinner message={t("general.labels.loggingin")} />;
  }

  return (
    <div>
      <Switch>
        <Suspense fallback={<LoadingSpinner message="App.Js Suspense" />}>
          <ErrorBoundary>
            <Route exact path="/" component={LandingPage} />
          </ErrorBoundary>
          <ErrorBoundary>
            <Route exact path="/signin" component={SignInPage} />
          </ErrorBoundary>
          <ErrorBoundary>
            <Route exact path="/resetpassword" component={ResetPassword} />
          </ErrorBoundary>
          <ErrorBoundary>
            <Route exact path="/csi/:surveyId" component={CsiPage} />
          </ErrorBoundary>
          <ErrorBoundary>
            <Route exact path="/about" component={AboutPage} />
          </ErrorBoundary>
          <ErrorBoundary>
            <Route
              exact
              path="/mp/:paymentIs"
              component={MobilePaymentContainer}
            />
          </ErrorBoundary>
          <ErrorBoundary>
            <PrivateRoute
              isAuthorized={currentUser.authorized}
              path="/manage"
              component={ManagePage}
            />
          </ErrorBoundary>
          <ErrorBoundary>
            <PrivateRoute
              isAuthorized={currentUser.authorized}
              path="/tech"
              component={TechPageContainer}
            />
          </ErrorBoundary>
        </Suspense>
      </Switch>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(App);