import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
// import {
//     useDashboardProjectsCardData,
//     useDashboardTeamsCardData,
//     useDashboardTasksCardData,
//     useAttendanceOverviewData
// } from "../../hooks/useDashboard_Data";

// import Projects from "./Projects";
// import Teams from "./Teams";
// import TasksCard from "./Tasks";
// import ProjectCompletionChart from "./ProjectCompletionChart";
// import ProjectProgressChart from "./ProjectProgressChart";
// import ProjectOverview from "../Project/ProjectOverview";
import AttendanceOverview from "./AttendanceOverview";
import { useSelectedProject } from "../../slices/apiDataManager";
import { useProjectName } from "../../hooks/useProjects";
import ExpenseAnalysis from "./ExpenseAnalysis";
import ExpenseStatus from "./ExpenseStatus";
import ExpenseByProject from "./ExpenseByProject";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {
  APPROVE_EXPENSE,
  EXPENSE_MANAGE,
  VIEW_ALL_EXPNESE,
} from "../../utils/constants";
import { useHasAnyPermission } from "../../hooks/useExpense";

const Dashboard = () => {
  // const { projectsCardData } = useDashboardProjectsCardData();
  // const { teamsCardData } = useDashboardTeamsCardData();
  // const { tasksCardData } = useDashboardTasksCardData();

  // Get the selected project ID from Redux store
  const projectId = useSelector((store) => store.localVariables.projectId);
  const isAllProjectsSelected = projectId === null;

  const isViewExpense = useHasAnyPermission(
    VIEW_ALL_EXPNESE,
    APPROVE_EXPENSE,
    EXPENSE_MANAGE
  );
  return (
    <div className="container-fluid py-5">
      {isViewExpense && (
        <div className="row mb-6 g-6">
          <div className="col-12 col-xl-8">
            <div className="card h-100">
              <ExpenseAnalysis />
            </div>
          </div>

          <div className="col-12 col-xl-4 col-md-6">
            <div className="card h-100">
              <ExpenseStatus />
            </div>
          </div>
        </div>
      )}

      <div className="row">
        {!isAllProjectsSelected && (
          <div className="col-12 col-md-6 mb-sm-0 mb-4 ">
            <AttendanceOverview />
          </div>
        )}
        <div className="col-12 col-md-6">
          <ExpenseByProject />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;