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

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

const AdminListFilters = ({
  filterRegister,
  setIsFilterModalOpen,
  isMutating,
  handleFilterSubmit,
  search,
  watch,
  setValue,
}: AdminListFiltersProps) => {
  return (
    <form
      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
      onSubmit={handleFilterSubmit(search)}
    >
      <Select
        {...filterRegister("status")}
        items={getEnumAsArray(AdminStatus)}
        label="status"
        name="status"
        placeholder="Status"
        clearable
        value={watch("status")}
        onClear={() => setValue("status", undefined)}
      />
      <InputGroup
        {...filterRegister("search")}
        name="search"
        label="search"
        placeholder="search"
        type="search"
      />
      {/* <InputGroup
        {...filterRegister("email")}
        name="email"
        label="email"
        placeholder="email"
        type="email"
      /> */}
      {/* <Select
        {...filterRegister("role")}
        name="role"
        items={getEnumAsArray(AdminRoles)}
        label="Role"
        placeholder="Role"
        clearable
        value={watch("role")}
        onClear={() => setValue("role", undefined)}
      /> */}
      {/* <InputGroup
        {...filterRegister("username")}
        label="username"
        name="username"
        placeholder="username"
        type="text"
      /> */}
      {/* <InputGroup
        {...filterRegister("full_name")}
        label="full name"
        name="full_name"
        placeholder="full name"
        type="text"
      /> */}

      <div className="flex gap-4">
        <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 AdminListFilters;
