import { Alert, Layout } from "antd";
import React from "react";
import { connect } from "react-redux";
import { Routes } from "react-router-dom";
import { Route } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectDarkMode } from "../../../redux/user/user.selectors";
import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
import ReleaseNotes from "../../molecules/release-notes/release-notes.molecule";
import NotificationModalOrganism from "../../organisms/notification-modal/notification-modal.organism";
import SiderMenuOrganism from "../../organisms/sider-menu/sider-menu.organism";
import UpdateManagerOrganism from "../../organisms/update-manager/update-manager.organism";
import JobsPage from "../jobs/jobs.page";
import ReportingPage from "../reporting/reporting.page";
import ScanPage from "../scan/scan.page";
import SettingsPage from "../settings/settings.page";
import AuditPage from "../audit/audit.page";
import AdminPage from "../admin/admin.page";

const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, darkMode: selectDarkMode });
const mapDispatchToProps = (dispatch) => ({});

export function RoutesPage({ bodyshop, darkMode }) {
  if (bodyshop === false)
    return (
      <ErrorResultAtom
        title="No shop access"
        errorMessage="You do not currently have access to any shop. Please reach out to technical support."
      />
    );

  return (
    <Layout style={{ height: "100vh" }} hasSider>
      <Layout.Sider style={{ background: !darkMode && "#fff" }} collapsible defaultCollapsed="true">
        <SiderMenuOrganism />
      </Layout.Sider>
      <Layout style={{}}>
        <Layout.Content style={{ marginLeft: "1rem", height: "100%" }}>
          <NotificationModalOrganism />
          {bodyshop?.ins_rule_set === "SGI" && (
            <Alert
              message="SGI has not yet released eligibility rules. MPI eligibility rules have been applied and may be incorrect."
              type="warning"
              showIcon
              style={{ marginBottom: "1rem" }}
            />
          )}
          <Routes>
            <Route exact path="/settings" element={<SettingsPage />} />
            <Route exact path="/reporting" element={<ReportingPage />} />
            <Route exact path="/audit" element={<AuditPage />} />
            <Route exact path="/scan" element={<ScanPage />} />
            <Route exact path="/admin" element={<AdminPage />} />
            <Route exact path="/" element={<JobsPage />} />
          </Routes>
        </Layout.Content>
        <ReleaseNotes />
        <UpdateManagerOrganism />
      </Layout>
    </Layout>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(RoutesPage);
