import React,{useEffect} from "react";
import { 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 "./AttendanceChart";
import { useFab } from "../../Context/FabContext";

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

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


     useEffect(() => {
    setShowTrigger(false);          
    console.log("OffCanvas")
    return () => setShowTrigger(true);
  }, [setShowTrigger])

    return (
        <div className="container-fluid mt-5">
            <div className="row gy-4">
                {isAllProjectsSelected && (
                    <div className="col-sm-6 col-lg-4">
                        <Projects projectsCardData={projectsCardData} />
                    </div>
                )}

                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
                    <Teams teamsCardData={teamsCardData} />
                </div>

                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
                    <TasksCard tasksCardData={tasksCardData} />
                </div>

                {isAllProjectsSelected && (
                    <div className="col-xxl-6 col-lg-6">
                        <ProjectCompletionChart />
                    </div>
                )}

                {!isAllProjectsSelected && (
                    <div className="col-xxl-6 col-lg-6">
                        <ProjectOverview />
                    </div>
                )}

                <div className="col-xxl-6 col-lg-6">
                    <ProjectProgressChart />
                </div>
                {!isAllProjectsSelected && (
                    <div className="col-xxl-6 col-lg-6">
                        <AttendanceOverview /> {/* ✅ Removed unnecessary projectId prop */}
                    </div>
                )}
            </div>
        </div>
    );
};

export default Dashboard;