import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import Loader from "../components/Loader";
import ThankYou from "../ThankYou/";
import { Box, Typography } from "@mui/material";
import SuperAdmin from "./components/SuperAdmin";
import { selectUserRole, setUserRole } from "../../redux/userRoleSlice";
import Totals from "./Tiles/Totals";
import { useStyles } from "./dashboardStyles";
import { USER_ROLES } from "../../constants";

function Dashboard() {
  const classes = useStyles();

  const [isLoading, setIsLoading] = React.useState(true);
  const [data, setData] = useState({
    draftedJobs: 0,
    activeJobs: 0,
    closedJobs: 0,
    totalJobs: 0,
    totalMaxJobPostings: 0,
    totalMaxResumeDownloads: 0,
    resumeDownloadedCount: 0,
    remainingJobPosts: 0,
    remainingResumeDownload: 0,
    accounts: null,
    lastPlanPurchase: null,
  });
  const dispatch = useDispatch();
  const userRole = useSelector(selectUserRole);
  const user = useSelector((state) => state.login.user);

  useEffect(() => {
    // Determine user role based on user data from login reducer
    if (user) {
      // Check if user is a super admin
      // This logic can be adjusted based on your specific role criteria
      const isSuperAdmin =
        user.userType == USER_ROLES.SUPER_ADMIN.toLowerCase();
      if (isSuperAdmin) {
        dispatch(setUserRole(USER_ROLES.SUPER_ADMIN));
      } else {
        dispatch(setUserRole(USER_ROLES.CLINIC_ADMIN));
      }
    }
    setIsLoading(false);
  }, [user, dispatch]);

  const superAdmin = (
    <Box>
      <SuperAdmin />
    </Box>
  );

  const clinicAdmin = (
    <Box>
      {/* <ThankYou  /> */}
      <Box>
        <Box>
          <Box className={classes.dashboardTitleBox}>
            <Typography variant="h4" className={classes.dashboardTitle}>
              Dashboard
            </Typography>
          </Box>
          <Totals data={data} setData={setData} />
        </Box>
      </Box>
    </Box>
  );

  return (
    <>
      {isLoading ? (
        <Loader />
      ) : userRole === USER_ROLES.SUPER_ADMIN ? (
        superAdmin
      ) : (
        clinicAdmin
      )}
    </>
  );
}

export default Dashboard;
