import InputGroup from "@/components/FormElements/InputGroup";
import { Select } from "@/components/FormElements/select";
import { Currencies } from "@/constants/enums";
import {
  FieldValues,
  UseFormHandleSubmit,
  UseFormRegister,
  UseFormSetValue,
  UseFormWatch,
} from "react-hook-form";

interface CompanyListFiltersProps {
  filterRegister: UseFormRegister<FieldValues>;
  setIsFilterModalOpen: (isOpen: boolean) => void;
  isMutating: number;
  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
  search: (data: any) => void;
  watch: UseFormWatch<FieldValues>;
  setValue: UseFormSetValue<any>;
}

const CompanyListFilters = ({
  filterRegister,
  setIsFilterModalOpen,
  isMutating,
  handleFilterSubmit,
  search,
  watch,
  setValue,
}: CompanyListFiltersProps) => {
  return (
    <form
      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
      onSubmit={handleFilterSubmit(search)}
    >
      <InputGroup
        {...filterRegister("name")}
        name="name"
        label="name"
        placeholder="Name"
        type="text"
      />
      <InputGroup
        {...filterRegister("email")}
        name="email"
        label="email"
        placeholder="Email"
        type="email"
      />
      <InputGroup
        {...filterRegister("phone")}
        name="phone"
        label="phone"
        placeholder="Phone"
        type="tel"
      />
      <Select
        {...filterRegister("currency")}
        items={Currencies}
        label="currency"
        name="currency"
        placeholder="Currency"
        clearable
        value={watch("currency")}
        onClear={() => setValue("currency", undefined)}
      />
      <InputGroup
        {...filterRegister("employee_count")}
        name="employee_count"
        label="employee count"
        placeholder="Employee Count"
        type="number"
      />

      <div className="flex gap-4 col-span-2">
        <button
          type="submit"
          className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
        >
          {isMutating ? (
            <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
          ) : (
            <span>Search</span>
          )}
        </button>
        <button
          type="button"
          className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
          onClick={() => setIsFilterModalOpen(false)}
        >
          Close
        </button>
      </div>
    </form>
  );
};

export default CompanyListFilters;
