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

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

const NotificationHistoryListFilters = ({
  filterRegister,
  setIsFilterModalOpen,
  isMutating,
  handleFilterSubmit,
  search,
}: NotificationHistoryListFiltersProps) => {
  return (
    <form
      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
      onSubmit={handleFilterSubmit(search)}
    >
      <Select
        {...filterRegister("seen")}
        items={[
          { label: "Seen", value: "true" },
          { label: "Not seen", value: "false" },
        ]}
        label="Seen"
        name="seen"
      />
      <InputGroup
        {...filterRegister("search")}
        name="search"
        label="search"
        placeholder="search"
        type="search"
      />

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