import React 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 ExpenseAnalysis from "./ExpenseAnalysis";
import ExpenseStatus from "./ExpenseStatus";
import ExpenseByProject from "./ExpenseByProject";

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;

    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>
                <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 ">
                        <ExpenseStatus />
                    </div>
                </div>
                {!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;