import React, { useState, useEffect, useCallback } from "react";
import "./ProjectInfra.css";
import BuildingModel from "./Infrastructure/BuildingModel";
import FloorModel from "./Infrastructure/FloorModel";
import showToast from "../../services/toastService";
import WorkAreaModel from "./Infrastructure/WorkAreaModel";
import TaskModel from "./Infrastructure/TaskModel";
import ProjectRepository, {
  TasksRepository,
} from "../../repositories/ProjectRepository";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA } from "../../utils/constants";
import InfraTable from "./Infrastructure/InfraTable";
import {
  cacheData,
  clearCacheKey,
  getCachedData,
} from "../../slices/apiDataManager";
import { useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
import { refreshData } from "../../slices/localVariablesSlice";
import eventBus from "../../services/eventBus";
import {useParams} from "react-router-dom";
import GlobalModel from "../common/GlobalModel";

const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
{
  const {projectId} = useParams()
  const reloadedData = useSelector((store) => store.localVariables.reload);
  const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
   const {projectInfra,isLoading,error} = useProjectInfra(projectId)
  const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
  const [ project, setProject ] = useState( projects_Details );
  const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
  const [showModalFloor, setshowModalFloor] = useState(false);
  const [showModalWorkArea, setshowModalWorkArea] = useState(false);
  const [showModalTask, setshowModalTask] = useState(false);
  const [showModalBuilding, setshowModalBuilding] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    setProject(projectInfra);
  }, [data, projects_Details]);

  // useEffect(() => {
  //   if (reloadedData) {
  //     refetch();
  //     dispatch(refreshData(false));
  //   }
  // }, [reloadedData]);

  const signalRHandler = (response) => {
    setProject(response);
  }

  return (
    <>
      {showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding( false )}>
        <BuildingModel
          project={projectInfra}
          onClose={() => setshowModalBuilding( false )}
        />
      </GlobalModel>} 
      {showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={()=>setshowModalFloor(false)}>
        <FloorModel
            project={projectInfra}
            onClose={()=>setshowModalFloor(false)}
          />
      </GlobalModel>}
      {showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={()=>setshowModalWorkArea(false)} >
          <WorkAreaModel
            project={projectInfra}
            onClose={()=>setshowModalWorkArea(false)}
          />
      </GlobalModel>}
      {showModalTask && ( <GlobalModel isOpen={showModalTask} size="lg" closeModal={()=>setshowModalTask(false)}>
        <TaskModel
            project={projectInfra}
            onClose={()=>setshowModalTask(false)}
          />
      </GlobalModel>)}
      <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
        <div className="card">
          <div className="card-body" style={{ padding: "0.5rem" }}>
            <div className="align-items-center">
              <div className="row ">
                <div
                  className={`col-12 text-end mb-1 ${
                    !ManageInfra && "d-none"
                  } `}
                >
                  <button
                    type="button"
                    className="link-button link-button-sm m-1 "
                    onClick={()=>setshowModalBuilding(true)}
                  >
                   <i className="bx bx-plus-circle me-2"></i>
                    Manage Building
                  </button>
                  <button
                    type="button"
                    className="link-button m-1"
                    onClick={()=>setshowModalFloor(true)}
                  >
                    <i className="bx bx-plus-circle me-2"></i>
                    Manage Floors
                  </button>
                  <button
                    type="button"
                    className="link-button m-1"
                    onClick={() => setshowModalWorkArea(true)}
                  >
                    <i className="bx bx-plus-circle me-2"></i>
                    Manage Work Areas
                  </button>
                  <button
                    type="button"
                    className="link-button m-1"
                    onClick={()=>setshowModalTask(true)}
                  >
                    <i className="bx bx-plus-circle me-2"></i>
                    Create Tasks
                  </button>
                </div>
              </div>
              <div className="row ">
                {isLoading && <p>Loading....</p>}
                {projectInfra && projectInfra?.length > 0 && (
                  <InfraTable
                    buildings={projectInfra}
                    projectId={projectId}
                    // handleFloor={submitData}
                    // signalRHandler ={signalRHandler}
                  />
                )}
                {!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ProjectInfra;