import React, { useState } from "react";
import TeamEmployeeList from "./TeamEmployeeList";
import { useOrganization } from "../../../hooks/useDirectory";
import { useOrganizationsList } from "../../../hooks/useOrganization";
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
import { useSelectedProject } from "../../../slices/apiDataManager";
import { AppFormController } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
import { useForm } from "react-hook-form";

const TeamAssignToProject = ({ closeModal }) => {
  const [searchText, setSearchText] = useState("");
  const [selectedOrg, setSelectedOrg] = useState(null);
  const project = useSelectedProject();
  const { data, isLoading, isError, error } =
    useProjectAssignedOrganizationsName(project);
  const { control, watch, formState: { errors } } = useForm({
    defaultValues: { organizationId: "" },
  });
  return (
    <div className="container">
      {/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
      <h5 className="mb-4">Assign Employee To Project</h5>

      <div className="row align-items-center gx-5 text-start">
          <div className="col-12 col-md-6 mb-2">
            <AppFormController
              name="organizationId"
              control={control}
              rules={{ required: "Organization is required" }}
              render={({ field }) => (
                <SelectField
                  label="Select Organization"
                  options={data ?? []}
                  placeholder="Choose an Organization"
                  required
                  labelKey="name"
                  valueKey="id"
                  value={field.value}
                  onChange={field.onChange}
                  isLoading={isLoading}
                  className="m-0 w-100"
                />
              )}
            />
            {errors.organizationId && (
              <small className="danger-text">{errors.organizationId.message}</small>
            )}
          </div>
        <div className="col-12 col-md-6 mt-n5">
          <div className="d-flex flex-column">
            <label htmlFor="search" className="form-label mb-1">
              Search Employee
            </label>
            <input
              id="search"
              type="search"
              className="form-control 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;