import React,{useEffect,useRef} from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import InfraPlanning from "../../components/Activities/InfraPlanning";
import { useProjectName } from "../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
import { useSelectedProject } from "../../slices/apiDataManager";

const TaskPlannng = () => {
const selectedProject = useSelectedProject();
const dispatch = useDispatch();
const { projectNames = [], loading: projectLoading } = useProjectName();

useEffect(() => {
  if (!selectedProject) {
    dispatch(setProjectId(projectNames[0].id));
  }
}, [projectNames, selectedProject?.id, dispatch]);


  return (
    <div className="container-fluid">
      <Breadcrumb
        data={[
          { label: "Home", link: "/dashboard" },
          { label: "Daily Task Planning" },
        ]}
      />
      {selectedProject ? (
        <InfraPlanning />
      ) : (
        <div className="text-center">Please Select Project</div>
      )}
    </div>
  );
};

export default TaskPlannng;