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();

   const initialized = useRef(false); 

  useEffect(() => {
    if (!initialized.current && projectNames.length > 0 && !selectedProject?.id) {
      dispatch(setProjectId(projectNames[0].id));
      initialized.current = true; 
    }
  }, [projectNames, selectedProject, 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;