import { Grid } from '@mui/material';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import ProtectedComponent from '../../../components/ProtectedComponent';
import { getClinicsDashboardStatsById } from '../../../services/clinics.service';
import TotalNumber from '../components/TotalNumber';
import { useStyles } from '../dashboardStyles';
import { getDashboardStats } from '../../../services/dashboard.services';

const Totals = ({ data, setData }) => {
  const classes = useStyles();

  const user = useSelector((state) => state?.login?.user);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      setIsLoading(true);
      const response = await getDashboardStats();
      const apiData = response?.data?.data || {};
      setData({
        activeJobs: apiData?.active,
        totalMaxJobPostings: apiData.inactive,
      });
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const {
    activeJobs,
    totalMaxJobPostings,
  } = data;
  const hasCandidateSearchFeature =
    data?.accounts?.features?.includes('SEARCH_CANDIDATE') || false;
  const viewAllClick = (tab) => {
    if (!user?.permission?.includes('STATISTIC_DASHBOARD')) return;
    let path = '/';
    // navigate(path, { state: { tab } });
  };

  return (
    <ProtectedComponent>
      <Grid container className={classes.numbers} spacing={2.8}>
        <Grid item>
          <TotalNumber
            heading={'Active Doctors/Nurses'}
            isLoading={isLoading}
            value={activeJobs}
            // showAsterisk
          />
        </Grid>
        <Grid item>
          <TotalNumber
            heading={`Inactive Doctors/Nurses`}
            isLoading={isLoading}
            viewAllClick={() => viewAllClick(true)}
            value={totalMaxJobPostings}
            // infoPopover={'Total no. of jobs which are in active state.'}
            // color="#14d1ad"
          />
        </Grid>
      </Grid>
    </ProtectedComponent>
  );
};

export default Totals;
