"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { useSession } from "next-auth/react";
import { FC, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { z } from "zod";
import { Select } from "../forms/Inputs";

export const itemSchema = z.object({
  item_per_page: z.coerce.number(),
});

type props = {
  per_page: number;
  keys?: string | null;
};

const ItemPerPage: FC<props> = ({ per_page, keys = null }) => {
  const itemForm = useForm<any>({
    resolver: zodResolver(itemSchema),
    mode: "onChange",
  });
  const queryClient = useQueryClient();

  const [item_per_page, setItemPerPage] = useState(per_page);

  const { data: session }: any = useSession();

  const {
    formState: { errors },
  } = itemForm;
  const { mutate: updatePagination } = useMutation<any>({
    mutationFn: async (formData) => {
      const { data } = await axios.put(
        `/api/staffs/pagination/${session?.staff?.id}`,
        formData
      );
      return data.data;
    },
    onSuccess: async (data: any) => {
      setItemPerPage(data?.item_per_page);
      location.reload();
      // if (keys) {
      //   queryClient.invalidateQueries({ queryKey: [keys] });
      // } else {
      //   location.reload();
      // }
    },
    onError: () => { },
  });
  const updateItemPerPage = (page: number) => {
    const data = {
      item_per_page: page,
      name: session?.staff?.name,
    };
    updatePagination(data as any);
  };
  return (
    <>
      <FormProvider {...itemForm}>
        {item_per_page && (
          <Select
            name="item_per_page"
            size={"sm"}
            options={[
              { value: 10, label: "10" },
              { value: 20, label: "20" },
              { value: 50, label: "50" },
              { value: 100, label: "100" },
              { value: 150, label: "150" },
              { value: 200, label: "200" },
              { value: 300, label: "300" },
              { value: 500, label: "500" },
            ]}
            onChange={(e) => updateItemPerPage(e.target.value)}
            defaultValue={item_per_page}
          />
        )}
      </FormProvider>
    </>
  );
};

export default ItemPerPage;