import React, { useState, useEffect } from "react";
import "../../components/Project/ProjectInfra.css";
import BuildingModel from "../Project/Infrastructure/BuildingModel";
import FloorModel from "../Project/Infrastructure/FloorModel";
import showToast from "../../services/toastService";
import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
import TaskModel from "../Project/Infrastructure/TaskModel";
import ProjectRepository from "../../repositories/ProjectRepository";
import Breadcrumb from "../../components/common/Breadcrumb";
import {useProjectDetails, useProjects} from "../../hooks/useProjects";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {MANAGE_PROJECT_INFRA} from "../../utils/constants";
import {useDispatch, useSelector} from "react-redux";
import {useProfile} from "../../hooks/useProfile";
import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
import InfraTable from "../Project/Infrastructure/InfraTable";


const InfraPlanning = () =>
{
  const {profile: LoggedUser, refetch : fetchData} = useProfile()
  const dispatch = useDispatch()
  const {projects,loading:project_listLoader,error:projects_error} = useProjects()

  const selectedProject = useSelector((store)=>store.localVariables.projectId)
  const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA )
  const {projects_Details, loading: project_deatilsLoader, error: project_error,refetch} = useProjectDetails( selectedProject )
  const reloadedData = useSelector( ( store ) => store.localVariables.reload )
 
  // useEffect( () =>
  // {
  //   dispatch(setProjectId(projects[0]?.id))
  // }, [ projects ] )
  
   useEffect( () =>
   {
     if (reloadedData)
     {
       refetch()
       dispatch( refreshData( false ) )
     }

   },[reloadedData])

  return (
    <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-sm-3 col-8 text-start mb-1">
                   <select name="DataTables_Table_0_length"
                                aria-controls="DataTables_Table_0"
                                className="form-select form-select-sm"
                                value={selectedProject}
                                onChange={(e)=>dispatch(setProjectId(e.target.value))}
                                aria-label=""
                   >
                                 {(project_listLoader || projects.length < 0) && <option value="Loading..." disabled>Loading...</option>  }
                  
                                 {!project_listLoader && projects?.map((project)=>(
                                     <option key={project.id} value={project.id}>{project.name}</option>
                                  ))} 
                      </select>
              </div>

          </div> */}
            <div className="row ">
              {project_deatilsLoader && ( <p>Loading...</p> )}
              {( !project_deatilsLoader && projects_Details?.buildings.length === 0 ) && ( <p>No Result Found</p> )}
              

              
              {(!project_deatilsLoader && projects_Details?.buildings?.length > 0) && (<InfraTable buildings={projects_Details?.buildings} projectId={projects_Details.id}/>)}
          </div>
        </div>
      </div>
    </div>
  </div>
  );
};

export default InfraPlanning;