import InputGroup from "@/components/FormElements/InputGroup";
import { Select } from "@/components/FormElements/select";
import { Countries } from "@/constants/countries";
import { TenderStatus } from "@/constants/enums";
import { getEnumAsArray } from "@/utils/shared";
import {
  FieldValues,
  UseFormHandleSubmit,
  UseFormRegister,
  UseFormSetValue,
  UseFormWatch,
} from "react-hook-form";

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

const TenderListFilters = ({
  filterRegister,
  setIsFilterModalOpen,
  isMutating,
  handleFilterSubmit,
  search,
  watch,
  setValue,
}: TenderListFiltersProps) => {
  return (
    <form
      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
      onSubmit={handleFilterSubmit(search)}
    >
      <InputGroup
        {...filterRegister("title")}
        name="title"
        label="title"
        placeholder="Title"
        type="text"
      />
      <Select
        {...filterRegister("status")}
        items={getEnumAsArray(TenderStatus)}
        label="status"
        name="status"
        placeholder="Status"
        clearable
        value={watch("status")}
        onClear={() => setValue("status", undefined)}
      />
      <Select
        {...filterRegister("country_code")}
        items={Countries}
        label="country code"
        name="country_code"
        placeholder="Country Code"
        clearable
        value={watch("country_code")}
        onClear={() => setValue("country_code", undefined)}
      />

      <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 TenderListFilters;
