import React, { useState, useEffect } from "react";
import MapUsers from "./MapUsers";
import showToast from "../../services/toastService";
import Avatar from "../common/Avatar";
import moment from "moment";

import ProjectRepository from "../../repositories/ProjectRepository";
import {useDispatch} from "react-redux";
import {changeMaster} from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster"
import {useHasUserPermission} from "../../hooks/useHasUserPermission"
import {ASSIGN_TO_PROJECT} from "../../utils/constants";


const Teams = ( {project} ) =>
{
  const dispatch = useDispatch()
  dispatch( changeMaster( 'Job Role' ) )
  const {data,loading} = useMaster()
  const [isModalOpen, setIsModelOpen] = useState(false);
  const [error, setError] = useState("");
  const [empJobRoles, setEmpJobRoles] = useState(null);
  const [clearFormTrigger, setClearFormTrigger] = useState(false);
  const [employees, setEmployees] = useState([]);
  const [ filteredEmployees, setFilteredEmployees ] = useState( [] );

  const HasAssignUserPermission = useHasUserPermission( ASSIGN_TO_PROJECT )


  
  const fetchEmployees = async () => {
    try {
      // if (!empRoles) {
      ProjectRepository.getProjectAllocation(project.id)
        .then((response) => {
          setEmployees(response.data);
          setFilteredEmployees(response.data.filter((emp) => emp.isActive));
        })
        .catch((error) => {
          console.error(error);
          setError("Failed to fetch data.");
        });
    } catch (err) {
      setError("Failed to fetch activities.");
    }
  };

  const submitAllocations = (items) => {
    ProjectRepository.manageProjectAllocation(items)
      .then((response) => {
        showToast("Details updated successfully.", "success");
        setClearFormTrigger(true); 
        fetchEmployees();
      })
      .catch((error) => {
        showToast(error.message, "error");
      });
  };

  const removeAllocation = (item) => {
    submitAllocations([
      {
        empID: item.employeeId,
        jobRoleId: item.jobRoleId,
        projectId: project.id,
        status: false,
      },
    ]);
  };

  const handleEmpAlicationFormSubmit = (allocaionObj) => {
   
    let items = allocaionObj.map((item) => {
      return {
        empID: item.empID,
        jobRoleId: item.jobRoleId,
        projectId: project.id,
        status: true,
      };
    });

 
    submitAllocations(items)
  };

  const getRole = ( jobRoleId ) =>
  {
    if (loading) return "Loading...";
    if (!Array.isArray(empJobRoles)) return "Unassigned"; 
    if (!jobRoleId) return "Unassigned";
  
    const role = empJobRoles.find((b) => b.id == jobRoleId); 
    return role ? role.name : "Unassigned";
  };
  const openModel = () => {
    setIsModelOpen(true);
  };
  
  const onModelClose = () => {
    setIsModelOpen(false);
    const modalElement = document.getElementById("user-model");
    if (modalElement) {
      modalElement.classList.remove("show");
      modalElement.style.display = "none";
      document.body.classList.remove("modal-open");
      document.querySelector(".modal-backdrop").remove();
    }
    const modalBackdropElement = document.querySelector('.modal-backdrop');
    if (modalBackdropElement) {
      modalBackdropElement.remove(); 
    }
    document.body.style.overflow = 'auto'
    
  };

  useEffect(() => {
    fetchEmployees();
  }, [] );
  
  useEffect( () =>
  {
    if ( data )
    {
    setEmpJobRoles(data)
    }
  },[data])

  const handleFilterEmployee = (e) => {
    const filterValue = e.target.value;
    if (filterValue === "true") {
      setFilteredEmployees(employees.filter((emp) => emp.isActive));
    } else {
      setFilteredEmployees(employees.filter((emp) => !emp.isActive));
    }
  };
 
  return (
    <>
      {isModalOpen && (
        <div
          className={`modal fade `}
          id="user-model"
          tabIndex="-1"
          aria-hidden="true"
        >
          <MapUsers
            projectId={project.id}
            onClose={onModelClose}
            empJobRoles={empJobRoles}
            onSubmit={handleEmpAlicationFormSubmit}
            allocation={employees}
            clearTrigger={clearFormTrigger}
            onClearComplete={() => setClearFormTrigger(false)}
          ></MapUsers>
        </div>
      )}
      <div className="card card-action mb-6">
        <div className="card-body">
          <div className="row">
            <div className="col-12 d-flex justify-content-between mb-1">
              <div
                className="dataTables_length text-start py-2 px-2"
                id="DataTables_Table_0_length"
              >
                <label>
                  <select
                    name="DataTables_Table_0_length"
                    aria-controls="DataTables_Table_0"
                    className="form-select form-select-sm"
                    onChange={handleFilterEmployee}
                    // value={false}
                    aria-label=""
                    defaultValue="true"
                  >
                    <option value="true">Active Employee</option>
                    <option value="false">In-Active Employee</option>
                  </select>
                </label>
              </div>
              <button
                type="button"
                className={`link-button link-button-sm m-1 ${HasAssignUserPermission ? "":"d-none"}`}
                data-bs-toggle="modal"
                data-bs-target="#user-model"
                onClick={() => openModel()}
              >
                <i className="bx bx-plus-circle me-2"></i>
                Assign Users
              </button>
            </div>
          </div>
          <div className="table-responsive text-nowrap">
            {employees && employees.length > 0 ? (
              <table className="table ">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Assigned Date</th>
                    <th>Release Date</th>
                    <th>Role</th>

                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody className="table-border-bottom-0">
                  {filteredEmployees &&
                    filteredEmployees.map((item) => (
                      <tr key={item.id}>
                        <td>
                          <div className="d-flex justify-content-start align-items-center">
                            <Avatar
                              firstName={item.firstName}
                              lastName={item.lastName}
                            ></Avatar>
                            <div className="d-flex flex-column">
                              <a
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault(); // Prevent default link behavior
                                  window.location.href =
                                    "/employee/" + item.employee.id;
                                }}
                                className="text-heading text-truncate"
                              >
                                <span className="fw-medium">
                                  {item.firstName} {item.lastName}
                                </span>
                              </a>
                            </div>
                          </div>
                        </td>
                        <td>
                          {" "}
                          {moment(item.allocationDate).format(
                            "DD-MMM-YYYY"
                          )}{" "}
                        </td>
                        <td>
                          {item.reAllocationDate
                            ? moment(item.reAllocationDate).format(
                                "DD-MMM-YYYY"
                              )
                            : "Present"}
                        </td>
                        <td>
                          <span className="badge bg-label-primary me-1">
                            {getRole(item.jobRoleId)}
                          </span>
                        </td>
                        <td>
                          {item.isActive && (
                            <button
                              aria-label="Delete"
                              type="button"
                              title="Remove from project"
                              className="btn p-0 dropdown-toggle hide-arrow"
                              onClick={() => removeAllocation(item)}
                            >
                              {" "}
                              <i className="bx bx-trash me-1 text-danger"></i>{" "}
                            </button>
                          )}
                          {!item.isActive && <span>Not in project</span>}
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
            ) : (
              <span>No employees assigned to the project</span>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default Teams;








// const Teams = ({ project }) => {
//   const dispatch = useDispatch()
//   const {data, loading} = useMaster()
//   const navigate = useNavigate()
  
  
//   const [isModalOpen, setIsModelOpen] = useState(false);
//   const [error, setError] = useState("");
//   const [empJobRoles, setEmpJobRoles] = useState([]);
//   const [clearFormTrigger, setClearFormTrigger] = useState(false);
//   const [employees, setEmployees] = useState([]);
//   const [ filteredEmployees, setFilteredEmployees ] = useState( [] );

//   useEffect( () =>
//   {
//     dispatch( changeMaster( 'Job Role' ) )
//   },[dispatch])
  
//   const fetchEmployees = useCallback(async () => {
//     try {
//       const response = await ProjectRepository.getProjectAllocation(project.id);
//       setEmployees(response.data);
//       setFilteredEmployees(response.data.filter((emp) => emp.isActive));
//     } catch (error) {
//       console.error(error);
//       setError("Failed to fetch data.");
//     }
//   }, [project.id]);

//   useEffect(() => {
//     fetchEmployees();
//   }, [fetchEmployees]);


//   useEffect(() => {
//     if (data) setEmpJobRoles(data);
//   }, [ data ] );
  
//   const submitAllocations = (items) => {
//     ProjectRepository.manageProjectAllocation(items)
//       .then((response) => {
//         showToast("Details updated successfully.", "success");
//         setClearFormTrigger(true); 
//         fetchEmployees();
//       })
//       .catch((error) => {
//         showToast(error.message, "error");
//       });
//   };

//   const removeAllocation = (item) => {
//     submitAllocations([
//       {
//         empID: item.employeeId,
//         jobRoleId: item.jobRoleId,
//         projectId: project.id,
//         status: false,
//       },
//     ]);
//   };

//   const handleEmpAlicationFormSubmit = (allocaionObj) => {
//     console.log("Form submitted:", allocaionObj); 
   
//     let items = allocaionObj.map((item) => {
//       return {
//         empID: item.empID,
//         jobRoleId: item.jobRoleId,
//         projectId: project.id,
//         status: true,
//       };
//     });
//     submitAllocations(items)
//   };

//   const getRole = ( jobRoleId ) =>
//   {
//     if (loading) return "Loading...";
//     if (!Array.isArray(empJobRoles)) return "Unassigned"; 
//     if (!jobRoleId) return "Unassigned";
  
//     const role = empJobRoles.find((b) => b.id == jobRoleId); 
//     return role ? role.name : "Unassigned";
//   };

//   const openModel = () => {
//     setIsModelOpen(true);
//   };
  
//   const onModelClose = () => {
//     setIsModelOpen(false);
//     const modalElement = document.getElementById("user-model");
//     if (modalElement) {
//       modalElement.classList.remove("show");
//       modalElement.style.display = "none";
//       document.body.classList.remove("modal-open");
//       document.querySelector(".modal-backdrop").remove();
//     }
//     const modalBackdropElement = document.querySelector('.modal-backdrop');
//     if (modalBackdropElement) {
//       modalBackdropElement.remove(); 
//     }
//     document.body.style.overflow = 'auto'
    
//   };


//    const handleFilterEmployee = (e) => {
//     const filterValue = e.target.value === "true";
//     setFilteredEmployees(
//       employees.filter((emp) => emp.isActive === filterValue)
//     );
//   };
 
//   return (
//     <>
//       {isModalOpen && (
//         <div
//           className={`modal fade `}
//           id="user-model"
//           tabIndex="-1"
//           aria-hidden="true"
//         >
//           <MapUsers
//             projectId={project.id}
//             onClose={onModelClose}
//             empJobRoles={empJobRoles}
//             onSubmit={handleEmpAlicationFormSubmit}
//             allocation={employees}
//             clearTrigger={clearFormTrigger}
//             onClearComplete={() => setClearFormTrigger(false)}
//           ></MapUsers>
//         </div>
//       )}
//       <div className="card card-action mb-6">
//         <div className="card-body">
//           <div className="row">
//             <div className="col-12 d-flex justify-content-between mb-1">
//               <div
//                 className="dataTables_length text-start py-2 px-2"
//                 id="DataTables_Table_0_length"
//               >
//                 <label>
//                   <select
//                     name="DataTables_Table_0_length"
//                     aria-controls="DataTables_Table_0"
//                     className="form-select form-select-sm"
//                     onChange={handleFilterEmployee}
//                     aria-label=""
//                     defaultValue="true"
//                   >
//                     <option value="true">Active Employee</option>
//                     <option value="false">In-Active Employee</option>
//                   </select>
//                 </label>
//               </div>
//               <button
//                 type="button"
//                 className="link-button link-button-sm m-1"
//                 data-bs-toggle="modal"
//                 data-bs-target="#user-model"
//                 onClick={() => openModel()}
//               >
//                 <i className="bx bx-plus-circle me-2"></i>
//                 Assign Users
//               </button>
//             </div>
//           </div>
//           <div className="table-responsive text-nowrap">
//             {employees && employees.length > 0 ? (
//               <table className="table ">
//                 <thead>
//                   <tr>
//                     <th>Name</th>
//                     <th>Assigned Date</th>
//                     <th>Release Date</th>
//                     <th>Role</th>
//                     <th>Actions</th>
//                   </tr>
//                 </thead>
//                 <tbody className="table-border-bottom-0">
//                   {filteredEmployees &&
//                     filteredEmployees.map((item) => (
//                       <tr key={item.id}>
//                         <td>
//                           <div className="d-flex justify-content-start align-items-center">
//                             <Avatar
//                               firstName={item.firstName}
//                               lastName={item.lastName}
//                             ></Avatar>
//                             <div className="d-flex flex-column">
//                               <a
//                                 href="#"
//                                 onClick={()=> navigate(`/employee/${item.employeeId}`)}
                               
//                                 className="text-heading text-truncate"
//                               >
//                                 <span className="fw-medium">
//                                   {item.firstName} {item.lastName}
//                                 </span>
//                               </a>
//                             </div>
//                           </div>
//                         </td>
//                         <td>
//                           {" "}
//                           {moment(item.allocationDate).format(
//                             "DD-MMM-YYYY"
//                           )}{" "}
//                         </td>
//                         <td>
//                           {item.reAllocationDate
//                             ? moment(item.reAllocationDate).format("DD-MMM-YYYY"): "Present"}
//                         </td>
//                         <td>
//                           <span className="badge bg-label-primary me-1">
//                             {getRole(item.jobRoleId)}
//                           </span>
//                         </td>
//                         <td>
//                           {item.isActive && (
//                             <button
//                               aria-label="Delete"
//                               type="button"
//                               title="Remove from project"
//                               className="btn p-0 dropdown-toggle hide-arrow"
//                               onClick={() => removeAllocation(item)}
//                             >
//                               {" "}
//                               <i className="bx bx-trash me-1 text-danger"></i>{" "}
//                             </button>
//                           )}
//                           {!item.isActive && <span>Not in project</span>}
//                         </td>
//                       </tr>
//                     ))}
//                 </tbody>
//               </table>
//             ) : (
//               <span>No employees assigned to the project</span>
//             )}
//           </div>
//         </div>
//       </div>
//     </>
//   );
// };

// export default Teams;
