import React, { useState } from "react";
import TeamEmployeeList from "./TeamEmployeeList";
import { useOrganization } from "../../../hooks/useDirectory";
import { useOrganizationsList } from "../../../hooks/useOrganization";
import { useProjectAssignedOrganizations } from "../../../hooks/useProjects";
import { useSelectedProject } from "../../../slices/apiDataManager";

const TeamAssignToProject = ({ closeModal }) => {
  const [searchText, setSearchText] = useState("");
  const [selectedOrg, setSelectedOrg] = useState(null);
  const project = useSelectedProject();
  const { data, isLoading, isError, error } =
    useProjectAssignedOrganizations(project);
  return (
    <div className="container">
      <p className="fs-5 fs-seminbod ">Assign Employee To Project </p>

      <div class="row align-items-center gx-5">
        <div class="col">
          <div className="d-flex flex-grow-1 align-items-center gap-2">
            {isLoading ? (
              <select className="form-select form-select-sm w-100" disabled>
                <option value="">Loading...</option>
              </select>
            ) : data?.length === 0 ? (
              <p className="mb-0 badge bg-label-secondary">No organizations found</p>
            ) : (
              <>
                <label
                  htmlFor="organization"
                  className="form-label mb-0 text-nowrap"
                >
                  Select Organization
                </label>
                <select
                  id="organization"
                  className="form-select form-select-sm w-100"
                  value={selectedOrg || ""}
                  onChange={(e) => setSelectedOrg(e.target.value)}
                >
                  <option value="">Select</option>
                  {data.map((org) => (
                    <option key={org.id} value={org.id}>
                      {org.name}
                    </option>
                  ))}
                </select>
              </>
            )}
          </div>
        </div>
        <div class="col">
          <div className="d-flex flex-grow-1 align-items-center gap-2">
            <label htmlFor="search" className="form-label mb-0 text-nowrap">
              Search Employee
            </label>
            <input
              id="search"
              type="search"
              className="form-control form-control-sm w-100"
              placeholder="Search..."
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
            />
          </div>
        </div>
      </div>

      <div >
        <TeamEmployeeList
          organizationId={selectedOrg}
          searchTerm={searchText}
          closeModal={closeModal}
        />
      </div>
    </div>
  );
};

export default TeamAssignToProject;