import React from "react";
import { Grid } from "../components/grid/Grid";
import { Box, Typography } from "@mui/material";
import { VisorsStaticsMainPage } from "../features/visors/components/visors-statics-main-page/VisorsStaticsMainPage";
import { SPACING } from "../data/spacing";
import { useLocation, useParams } from "react-router-dom";
import {
  ROUTE_ADMINX_VISOR_STATICS,
  ROUTE_CITY_VISOR_STATICS,
  ROUTE_PROVINCEـVISOR_STATICS,
  ROUTE_VETـSUPERVISOR_STATICS,
  ROUTE_COMMERCE_VISOR_STATICS,
  ROUTE_PROVINCE_SUPERVISOR_STATICS,
  ROUTE_OBSERVATORY_VISOR_STATICS,
  ROUTE_SUPER_ADMIN_VISOR_STATICS,
  ROUTE_ADMINX_VISOR_STATICS_CHARTS,
  ROUTE_CITY_VISOR_STATICS_CHARTS,
  ROUTE_PROVINCEـVISOR_STATICS_CHARTS,
  ROUTE_VETـSUPERVISOR_STATICS_CHARTS,
  ROUTE_COMMERCE_VISOR_STATICS_CHARTS,
  ROUTE_PROVINCE_SUPERVISOR_STATICS_CHARTS,
  ROUTE_OBSERVATORY_VISOR_STATICS_CHARTS,
  ROUTE_SUPER_ADMIN_VISOR_STATICS_CHARTS,
  ROUTE_ADMINX_VISOR_STATICS_PREDICTION,
  ROUTE_CITY_VISOR_STATICS_PREDICTION,
  ROUTE_PROVINCEـVISOR_STATICS_PREDICTION,
  ROUTE_VETـSUPERVISOR_STATICS_PREDICTION,
  ROUTE_COMMERCE_VISOR_STATICS_PREDICTION,
  ROUTE_PROVINCE_SUPERVISOR_STATICS_PREDICTION,
  ROUTE_OBSERVATORY_VISOR_STATICS_PREDICTION,
  ROUTE_SUPER_ADMIN_VISOR_STATICS_PREDICTION,
  ROUTE_ADMINX_NATIONAL_STATICS,
  ROUTE_SUPER_ADMIN_NATIONAL_STATICS,
  ROUTE_ADMIN_NATIONAL_STATICS,
  ROUTE_PROVINCE_NATIONAL_STATICS,
} from "../routes/routes";
import { VisorsStaticsOperations } from "../features/visors/components/visors-statics-operations/VisorsStaticsOperations";
import { BackButton } from "../components/back-button/BackButton";
import { VisorStaticsPrediction } from "../features/visors/components/visor-statics-prediction/VisorStaticsPrediction";
import { VisorStaticsPredictionDetails } from "../features/visors/components/visor-statics-prediction-details/VisorStaticsPredictionDetails";
import { VisorStaticsNationalInfo } from "../features/visors/components/visor-statics-national-info/VisorStaticsNationalInfo";

const VisorStatics = () => {
  const { key } = useParams();
  const renderComponentBasedOnPath = (pathname) => {
    const chartsRoutes = [
      ROUTE_ADMINX_VISOR_STATICS_CHARTS,
      ROUTE_CITY_VISOR_STATICS_CHARTS,
      ROUTE_PROVINCEـVISOR_STATICS_CHARTS,
      ROUTE_VETـSUPERVISOR_STATICS_CHARTS,
      ROUTE_COMMERCE_VISOR_STATICS_CHARTS,
      ROUTE_PROVINCE_SUPERVISOR_STATICS_CHARTS,
      ROUTE_OBSERVATORY_VISOR_STATICS_CHARTS,
      ROUTE_SUPER_ADMIN_VISOR_STATICS_CHARTS,
    ];

    const predictionRoutes = [
      ROUTE_ADMINX_VISOR_STATICS_PREDICTION,
      ROUTE_CITY_VISOR_STATICS_PREDICTION,
      ROUTE_PROVINCEـVISOR_STATICS_PREDICTION,
      ROUTE_VETـSUPERVISOR_STATICS_PREDICTION,
      ROUTE_COMMERCE_VISOR_STATICS_PREDICTION,
      ROUTE_PROVINCE_SUPERVISOR_STATICS_PREDICTION,
      ROUTE_OBSERVATORY_VISOR_STATICS_PREDICTION,
      ROUTE_SUPER_ADMIN_VISOR_STATICS_PREDICTION,
    ];

    const nationalInfoRoutes = [
      ROUTE_ADMINX_NATIONAL_STATICS,
      ROUTE_SUPER_ADMIN_NATIONAL_STATICS,
      ROUTE_ADMIN_NATIONAL_STATICS,
      ROUTE_PROVINCE_NATIONAL_STATICS,
    ];

    if (chartsRoutes.includes(pathname)) return <VisorsStaticsMainPage />;
    if (nationalInfoRoutes.includes(pathname))
      return <VisorStaticsNationalInfo />;
    if (predictionRoutes.some((route) => pathname.includes(route)))
      return <VisorStaticsPrediction />;

    return null;
  };

  const DashboardTitle = () => (
    <Grid justifyContent="center" my={SPACING.MEDIUM}>
      <Grid>
        <Typography variant="h6">داشبورد پایش آماری</Typography>
      </Grid>
    </Grid>
  );

  const { pathname } = useLocation();

  const isDashboardRoute = [
    ROUTE_ADMINX_VISOR_STATICS,
    ROUTE_CITY_VISOR_STATICS,
    ROUTE_PROVINCEـVISOR_STATICS,
    ROUTE_VETـSUPERVISOR_STATICS,
    ROUTE_COMMERCE_VISOR_STATICS,
    ROUTE_PROVINCE_SUPERVISOR_STATICS,
    ROUTE_OBSERVATORY_VISOR_STATICS,
    ROUTE_SUPER_ADMIN_VISOR_STATICS,
  ].includes(pathname);

  return (
    <Box display="flex" justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        {isDashboardRoute && !key ? (
          <>
            <DashboardTitle />
            <VisorsStaticsOperations />
          </>
        ) : (
          !key && <BackButton />
        )}

        {!key && renderComponentBasedOnPath(pathname)}
        {key && <VisorStaticsPredictionDetails />}
      </Grid>
    </Box>
  );
};

export default VisorStatics;
