import {FloatButton, Layout} from "antd";
import preval from "preval.macro";
import React, {lazy, Suspense, useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {Link, Route, Routes} 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.page";
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";
import UpdateAlert from "../../components/update-alert/update-alert.component";

const JobsPage = lazy(() => import("../jobs/jobs.page"));

const CardPaymentModalContainer = lazy(() =>
    import("../../components/card-payment-modal/card-payment-modal.container.")
);

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 ManageRootPage = lazy(() =>
    import("../manage-root/manage-root.page.container")
);

const {Content, Footer} = Layout;

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

export function Manage({conflict, bodyshop}) {
    const {t} = useTranslation();
    const [chatVisible] = useState(false);


    useEffect(() => {
        const widgetId = "IABVNO4scRKY11XBQkNr";
        window.noticeable.render("widget", widgetId);
        requestForToken().catch((error) => {
            console.error(`Unable to request for token.`, error)
        });
    }, []);

    useEffect(() => {
        document.title = t("titles.app");
    }, [t]);
    const AppRouteTable = (
        <Suspense
            fallback={<LoadingSpinner message={t("general.labels.loadingapp")}/>} This
        >
            <PaymentModalContainer/>

            <CardPaymentModalContainer/>

            <BreadCrumbs/>
            <BillEnterModalContainer/>
            <JobCostingModal/>
            <ReportCenterModal/>
            <EmailOverlayContainer/>
            <TimeTicketModalContainer/>
            <PrintCenterModalContainer/>
            <Routes>
                <Route path='/_test' element={<TestComponent/>}/>
                <Route path='/' element={<ManageRootPage/>}/>
                <Route path='/jobs' element={<JobsPage/>}/>
                <Route
                    path='/jobs/:jobId/intake'
                    element={<JobIntake/>}
                />
                <Route
                    path='/jobs/:jobId/deliver'
                    element={<JobDeliver/>}
                />
                <Route
                    path='/jobs/:jobId/checklist'
                    element={<JobChecklistView/>}
                />
                <Route
                    path='/jobs/:jobId/close'
                    element={<JobsClose/>}
                />
                <Route
                    path='/jobs/:jobId/admin'
                    element={<JobsAdmin/>}
                />
                <Route path='/jobs/all' element={<AllJobs/>}/>
                <Route path='/jobs/ready' element={<ReadyJobs/>}/>
                <Route
                    path='/jobs/new'
                    element={<JobsCreateContainerPage/>}
                />
                <Route path='/jobs/:jobId' element={<JobsDetailPage/>}/>
                <Route path='/temporarydocs/' element={<TempDocs/>}/>
                <Route
                    path='/inventory/'
                    element={<InventoryListPage/>}
                />
                <Route
                    path='/courtesycars/'
                    element={<CourtesyCarsPage/>}
                />
                <Route
                    path='/courtesycars/new'
                    element={<CourtesyCarCreateContainer/>}
                />
                <Route
                    path='/courtesycars/contracts'
                    element={<ContractsList/>}
                />
                <Route
                    path='/courtesycars/contracts/new'
                    element={<ContractCreatePage/>}
                />
                <Route
                    path='/courtesycars/contracts/:contractId'
                    element={<ContractDetailPage/>}
                />
                <Route
                    path='/courtesycars/:ccId'
                    element={<CourtesyCarDetailContainer/>}
                />
                <Route path='/profile' element={<ProfilePage/>}/>
                <Route
                    path='/vehicles'
                    element={<VehiclesContainer/>}
                />
                <Route
                    path='/production/list'
                    element={<ProductionListPage/>}
                />
                <Route
                    path='/production/board'
                    element={<ProductionBoardPage/>}
                />
                <Route
                    path='/vehicles/:vehId'
                    element={<VehiclesDetailContainer/>}
                />
                <Route path='/bills' element={<BillsListPage/>}/>
                <Route path='/owners' element={<OwnersContainer/>}/>
                <Route
                    path='/owners/:ownerId'
                    element={<OwnersDetailContainer/>}
                />
                <Route
                    path='/schedule'
                    element={<ScheduleContainer/>}
                />
                <Route
                    path='/available'
                    element={<JobsAvailablePage/>}
                />
                <Route path='/shop' element={<ShopPage/>}/>
                {
                    //   <Route
                    // path='/shop/templates'
                    // element={<ShopTemplates />}
                    //   />
                }
                <Route
                    path='/shop/vendors'
                    element={<ShopVendorPageContainer/>}
                />
                <Route
                    path='/shop/csi'
                    element={<ShopCsiPageContainer/>}
                />

                <Route
                    path='/accounting/qbo'
                    element={<AccountingQboCallback/>}
                />

                <Route
                    path='/accounting/receivables'
                    element={<AccountingReceivables/>}
                />
                <Route
                    path='/accounting/payables'
                    element={<AccountingPayables/>}
                />
                <Route
                    path='/accounting/payments'
                    element={<AccountingPayments/>}
                />
                <Route
                    path='/accounting/exportlogs'
                    element={<ExportLogs/>}
                />
                <Route path='/partsqueue' element={<PartsQueue/>}/>
                <Route path='/phonebook' element={<Phonebook/>}/>

                <Route path='/payments' element={<PaymentsAll/>}/>
                <Route path='/shiftclock' element={<ShiftClock/>}/>
                <Route path='/scoreboard' element={<Scoreboard/>}/>
                <Route
                    path='/timetickets'
                    element={<TimeTicketsAll/>}
                />
                <Route path='/help' element={<Help/>}/>
                <Route path='/emailtest' element={<EmailTest/>}/>
                <Route path='/dashboard' element={<Dashboard/>}/>
                <Route path='/dms' element={<Dms/>}/>
                <Route path='/dmsap' element={<DmsPayables/>}/>
            </Routes>
        </Suspense>
    );

    let PageContent;

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

    return (
        <>
            <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible}/>
            <Layout style={{minHeight: '100vh'}}className="layout-container">
                <UpdateAlert/>
                <HeaderContainer/>
                <Content className="content-container">
                    <PartnerPingComponent/>
                    <Sentry.ErrorBoundary fallback={<ErrorBoundary/>} showDialog>
                        {PageContent}
                    </Sentry.ErrorBoundary>

                    <FloatButton.BackTop style={{right: 100, bottom: 25}}/>

                </Content>
                <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>
            </Layout>
        </>
    );
}

export default connect(mapStateToProps, null)(Manage);