import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { BackTop, Layout } from "antd";
import preval from "preval.macro";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, Route, Switch } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
import ConflictComponent from "../../components/conflict/conflict.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
//import FooterComponent from "../../components/footer/footer.component";
//Component Imports
import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
import TestComponent from "../../components/_test/test.component";
import { requestForToken } from "../../firebase/firebase.utils";
import {
  selectBodyshop,
  selectInstanceConflict,
} from "../../redux/user/user.selectors";
import * as Sentry from "@sentry/react";

import "./manage.page.styles.scss";

const ManageRootPage = lazy(() =>
  import("../manage-root/manage-root.page.container")
);
const JobsPage = lazy(() => import("../jobs/jobs.page"));

const JobsDetailPage = lazy(() =>
  import("../jobs-detail/jobs-detail.page.container")
);
const InventoryListPage = lazy(() => import("../inventory/inventory.page"));
const ProfilePage = lazy(() => import("../profile/profile.container.page"));
const JobsAvailablePage = lazy(() =>
  import("../jobs-available/jobs-available.page.container")
);
const ScheduleContainer = lazy(() =>
  import("../schedule/schedule.page.container")
);
const VehiclesContainer = lazy(() =>
  import("../vehicles/vehicles.page.container")
);
const VehiclesDetailContainer = lazy(() =>
  import("../vehicles-detail/vehicles-detail.page.container")
);
const OwnersContainer = lazy(() => import("../owners/owners.page.container"));
const OwnersDetailContainer = lazy(() =>
  import("../owners-detail/owners-detail.page.container")
);
const ShopPage = lazy(() => import("../shop/shop.page.component"));
const ShopVendorPageContainer = lazy(() =>
  import("../shop-vendor/shop-vendor.page.container")
);
const EmailOverlayContainer = lazy(() =>
  import("../../components/email-overlay/email-overlay.container.jsx")
);
const JobsCreateContainerPage = lazy(() =>
  import("../jobs-create/jobs-create.container")
);
const CourtesyCarCreateContainer = lazy(() =>
  import("../courtesy-car-create/courtesy-car-create.page.container")
);
const CourtesyCarDetailContainer = lazy(() =>
  import("../courtesy-car-detail/courtesy-car-detail.page.container")
);
const CourtesyCarsPage = lazy(() =>
  import("../courtesy-cars/courtesy-cars.page.container")
);
const ContractCreatePage = lazy(() =>
  import("../contract-create/contract-create.page.container")
);
const ContractDetailPage = lazy(() =>
  import("../contract-detail/contract-detail.page.container")
);
const ContractsList = lazy(() =>
  import("../contracts/contracts.page.container")
);
const BillsListPage = lazy(() => import("../bills/bills.page.container"));

const JobCostingModal = lazy(() =>
  import("../../components/job-costing-modal/job-costing-modal.container")
);
const ReportCenterModal = lazy(() =>
  import("../../components/report-center-modal/report-center-modal.container")
);
const BillEnterModalContainer = lazy(() =>
  import("../../components/bill-enter-modal/bill-enter-modal.container")
);
const TimeTicketModalContainer = lazy(() =>
  import("../../components/time-ticket-modal/time-ticket-modal.container")
);
const PaymentModalContainer = lazy(() =>
  import("../../components/payment-modal/payment-modal.container")
);
const ProductionListPage = lazy(() =>
  import("../production-list/production-list.container")
);
const ProductionBoardPage = lazy(() =>
  import("../production-board/production-board.container")
);
// const ShopTemplates = lazy(() =>
//   import("../shop-templates/shop-templates.container")
// );
const JobIntake = lazy(() =>
  import("../jobs-intake/jobs-intake.page.container")
);
const JobChecklistView = lazy(() =>
  import("../jobs-checklist-view/jobs-checklist-view.page")
);
const JobDeliver = lazy(() =>
  import("../jobs-deliver/jobs-delivery.page.container")
);
const AccountingQboCallback = lazy(() =>
  import("../accounting-qbo/accounting-qbo.page")
);
const AccountingReceivables = lazy(() =>
  import("../accounting-receivables/accounting-receivables.container")
);
const AccountingPayables = lazy(() =>
  import("../accounting-payables/accounting-payables.container")
);
const AccountingPayments = lazy(() =>
  import("../accounting-payments/accounting-payments.container")
);
const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
const ReadyJobs = lazy(() => import("../jobs-ready/jobs-ready.page"));
const JobsClose = lazy(() => import("../jobs-close/jobs-close.container"));
const JobsAdmin = lazy(() => import("../jobs-admin/jobs-admin.page"));
const TempDocs = lazy(() =>
  import("../temporary-docs/temporary-docs.container")
);

const ShopCsiPageContainer = lazy(() =>
  import("../shop-csi/shop-csi.container.page")
);
const PaymentsAll = lazy(() =>
  import("../payments-all/payments-all.container.page")
);
const ShiftClock = lazy(() => import("../shift-clock/shift-clock.page"));
const Scoreboard = lazy(() =>
  import("../scoreboard/scoreboard.page.container")
);
const TimeTicketsAll = lazy(() =>
  import("../time-tickets/time-tickets.container")
);
const Help = lazy(() => import("../help/help.page"));
const PartsQueue = lazy(() =>
  import("../parts-queue/parts-queue.page.container")
);
const ExportLogs = lazy(() =>
  import("../export-logs/export-logs.page.container")
);
const Phonebook = lazy(() => import("../phonebook/phonebook.page.container"));

const EmailTest = lazy(() =>
  import("../../components/email-test/email-test-component")
);
const Dashboard = lazy(() => import("../dashboard/dashboard.container"));
const Dms = lazy(() => import("../dms/dms.container"));
const DmsPayables = lazy(() =>
  import("../dms-payables/dms-payables.container")
);

const { Content, Footer } = Layout;

const stripePromise = new Promise((resolve, reject) => {
  // client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
  //   if (resp.data.bodyshops[0])
  resolve(
    loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY, {
      stripeAccount: "No Stripe Id Resolve",
    })
  );
  //   reject();
  // });
});

const mapStateToProps = createStructuredSelector({
  conflict: selectInstanceConflict,
  bodyshop: selectBodyshop,
});

export function Manage({ match, conflict, bodyshop }) {
  const { t } = useTranslation();
  useEffect(() => {
    const widgetId = "IABVNO4scRKY11XBQkNr";
    window.noticeable.render("widget", widgetId);
    try {
      requestForToken();
    } catch (error) {
      console.log("Unable to request for token.", error);
    }
  }, []);

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

  const AppRouteTable = (
    <Suspense
      fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
    >
      <Elements stripe={stripePromise}>
        <PaymentModalContainer />
      </Elements>
      <BreadCrumbs />
      <BillEnterModalContainer />
      <JobCostingModal />
      <ReportCenterModal />
      <EmailOverlayContainer />
      <TimeTicketModalContainer />
      <PrintCenterModalContainer />
      <Route exact path={`${match.path}/_test`} component={TestComponent} />
      <Route exact path={`${match.path}`} component={ManageRootPage} />
      <Route exact path={`${match.path}/jobs`} component={JobsPage} />
      <Switch>
        <Route
          exact
          path={`${match.path}/jobs/:jobId/intake`}
          component={JobIntake}
        />
        <Route
          exact
          path={`${match.path}/jobs/:jobId/deliver`}
          component={JobDeliver}
        />
        <Route
          exact
          path={`${match.path}/jobs/:jobId/checklist`}
          component={JobChecklistView}
        />
        <Route
          exact
          path={`${match.path}/jobs/:jobId/close`}
          component={JobsClose}
        />
        <Route
          exact
          path={`${match.path}/jobs/:jobId/admin`}
          component={JobsAdmin}
        />
        <Route exact path={`${match.path}/jobs/all`} component={AllJobs} />
        <Route exact path={`${match.path}/jobs/ready`} component={ReadyJobs} />
        <Route
          exact
          path={`${match.path}/jobs/new`}
          component={JobsCreateContainerPage}
        />
        <Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} />
      </Switch>
      <Route exact path={`${match.path}/temporarydocs/`} component={TempDocs} />
      <Route
        exact
        path={`${match.path}/inventory/`}
        component={InventoryListPage}
      />
      <Route
        exact
        path={`${match.path}/courtesycars/`}
        component={CourtesyCarsPage}
      />
      <Switch>
        <Route
          exact
          path={`${match.path}/courtesycars/new`}
          component={CourtesyCarCreateContainer}
        />

        <Route
          exact
          path={`${match.path}/courtesycars/contracts`}
          component={ContractsList}
        />

        <Route
          exact
          path={`${match.path}/courtesycars/contracts/new`}
          component={ContractCreatePage}
        />
        <Route
          exact
          path={`${match.path}/courtesycars/contracts/:contractId`}
          component={ContractDetailPage}
        />

        <Route
          exact
          path={`${match.path}/courtesycars/:ccId`}
          component={CourtesyCarDetailContainer}
        />
      </Switch>
      <Route exact path={`${match.path}/profile`} component={ProfilePage} />
      <Route
        exact
        path={`${match.path}/vehicles`}
        component={VehiclesContainer}
      />
      <Route
        exact
        path={`${match.path}/production/list`}
        component={ProductionListPage}
      />
      <Route
        exact
        path={`${match.path}/production/board`}
        component={ProductionBoardPage}
      />
      <Route
        exact
        path={`${match.path}/vehicles/:vehId`}
        component={VehiclesDetailContainer}
      />
      <Route exact path={`${match.path}/bills`} component={BillsListPage} />
      <Route exact path={`${match.path}/owners`} component={OwnersContainer} />
      <Route
        exact
        path={`${match.path}/owners/:ownerId`}
        component={OwnersDetailContainer}
      />
      <Route
        exact
        path={`${match.path}/schedule`}
        component={ScheduleContainer}
      />
      <Route
        exact
        path={`${match.path}/available`}
        component={JobsAvailablePage}
      />
      <Route exact path={`${match.path}/shop/`} component={ShopPage} />
      {
        //   <Route
        // exact
        // path={`${match.path}/shop/templates`}
        // component={ShopTemplates}
        //   />
      }
      <Route
        exact
        path={`${match.path}/shop/vendors`}
        component={ShopVendorPageContainer}
      />
      <Route
        exact
        path={`${match.path}/shop/csi`}
        component={ShopCsiPageContainer}
      />

      <Route
        exact
        path={`${match.path}/accounting/qbo`}
        component={AccountingQboCallback}
      />

      <Route
        exact
        path={`${match.path}/accounting/receivables`}
        component={AccountingReceivables}
      />
      <Route
        exact
        path={`${match.path}/accounting/payables`}
        component={AccountingPayables}
      />
      <Route
        exact
        path={`${match.path}/accounting/payments`}
        component={AccountingPayments}
      />
      <Route
        exact
        path={`${match.path}/accounting/exportlogs`}
        component={ExportLogs}
      />
      <Route exact path={`${match.path}/partsqueue`} component={PartsQueue} />
      <Route exact path={`${match.path}/phonebook`} component={Phonebook} />

      <Route exact path={`${match.path}/payments`} component={PaymentsAll} />
      <Route exact path={`${match.path}/shiftclock`} component={ShiftClock} />
      <Route exact path={`${match.path}/scoreboard`} component={Scoreboard} />
      <Route
        exact
        path={`${match.path}/timetickets`}
        component={TimeTicketsAll}
      />
      <Route exact path={`${match.path}/help`} component={Help} />
      <Route exact path={`${match.path}/emailtest`} component={EmailTest} />
      <Route exact path={`${match.path}/dashboard`} component={Dashboard} />
      <Route exact path={`${match.path}/dms`} component={Dms} />
      <Route exact path={`${match.path}/dmsap`} component={DmsPayables} />
    </Suspense>
  );

  let PageContent;

  if (conflict) PageContent = <ConflictComponent />;
  else if (bodyshop && bodyshop.sub_status !== "active")
    PageContent = <ShopSubStatusComponent />;
  else PageContent = AppRouteTable;

  return (
    <>
      <ChatAffixContainer />
      <Layout className="layout-container">
        <HeaderContainer />

        <Content className="content-container">
          <PartnerPingComponent />
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            {PageContent}
          </Sentry.ErrorBoundary>

          <BackTop />
          <Footer>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                margin: "1rem 0rem",
              }}
            >
              <div style={{ display: "flex" }}>
                <div>
                  {`ImEX Online ${
                    process.env.REACT_APP_GIT_SHA
                  } - ${preval`module.exports = new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles"});`}`}
                </div>
                <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
              </div>
              <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
                Disclaimer & Notices
              </Link>
            </div>
          </Footer>
        </Content>
      </Layout>
    </>
  );
}
export default connect(mapStateToProps, null)(Manage);
