import { BackTop, Layout } from "antd";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Redirect, Route, Switch } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import TechHeader from "../../components/tech-header/tech-header.component";
import TechSider from "../../components/tech-sider/tech-sider.component";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import "./tech.page.styles.scss";
const TimeTicketModalContainer = lazy(() =>
  import("../../components/time-ticket-modal/time-ticket-modal.container")
);
const PrintCenterModalContainer = lazy(() =>
  import("../../components/print-center-modal/print-center-modal.container")
);
const TechLogin = lazy(() =>
  import("../../components/tech-login/tech-login.component")
);
const TechLookup = lazy(() => import("../tech-lookup/tech-lookup.container"));
const ProductionListPage = lazy(() =>
  import("../production-list/production-list.container")
);
const ProductionBoardPage = lazy(() =>
  import("../production-board/production-board.container")
);
const TechClockIn = lazy(() =>
  import("../../components/tech-clock-in/tech-clock-in.container")
);

const { Content } = Layout;

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function TechPage({ technician, match }) {
  const { t } = useTranslation();

  useEffect(() => {
    document.title = t("titles.app");
  }, [t]);

  return (
    <Layout className="tech-layout-container">
      <TechSider />
      <Layout>
        {technician ? null : <Redirect to={`${match.path}/login`} />}
        <TechHeader />
        <Content className="tech-content-container">
          <FcmNotification />
          <ErrorBoundary>
            <Suspense
              fallback={
                <LoadingSpinner message={t("general.labels.loadingapp")} />
              }
            >
              <TimeTicketModalContainer />
              <PrintCenterModalContainer />
              <Switch>
                <Route
                  exact
                  path={`${match.path}/login`}
                  component={TechLogin}
                />
                <Route
                  exact
                  path={`${match.path}/joblookup`}
                  component={TechLookup}
                />
                <Route
                  exact
                  path={`${match.path}/list`}
                  component={ProductionListPage}
                />{" "}
                <Route
                  exact
                  path={`${match.path}/clockin`}
                  component={TechClockIn}
                />
                <Route
                  exact
                  path={`${match.path}/board`}
                  component={ProductionBoardPage}
                />
              </Switch>
            </Suspense>
          </ErrorBoundary>

          <BackTop />
        </Content>
      </Layout>
    </Layout>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(TechPage);