import { Select } from "@/components/FormElements/select";
import { AdminRoles, CustomerStatus, CustomerType } from "@/constants/enums";
import { getEnumAsArray } from "@/utils/shared";
import {
  FieldValues,
  UseFormHandleSubmit,
  UseFormRegister,
  UseFormSetValue,
  UseFormWatch,
} from "react-hook-form";

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

const CustomerListFilters = ({
  filterRegister,
  setIsFilterModalOpen,
  isMutating,
  handleFilterSubmit,
  search,
  watch,
  setValue,
}: CustomerListFiltersProps) => {
  return (
    <form
      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
      onSubmit={handleFilterSubmit(search)}
    >
      <Select
        {...filterRegister("status")}
        items={getEnumAsArray(CustomerStatus)}
        label="status"
        name="status"
        placeholder="Status"
        clearable
        value={watch("status")}
        onClear={() => setValue("status", undefined)}
      />
      <Select
        {...filterRegister("role")}
        items={getEnumAsArray(AdminRoles)}
        label="role"
        name="role"
        placeholder="Role"
        clearable
        value={watch("role")}
        onClear={() => setValue("role", undefined)}
      />
      <Select
        {...filterRegister("type")}
        items={getEnumAsArray(CustomerType)}
        label="type"
        name="type"
        placeholder="Type"
        clearable
        value={watch("type")}
        onClear={() => setValue("type", 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 CustomerListFilters;
