"use client";
import { postData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { GrUpdate } from "react-icons/gr";
import { MdDownload } from "react-icons/md";
import { toast } from "react-toastify";
import Button from "../Button";
import DropdownList from "../common/Dropdown";
import Spinner from "../spinner";

type props = {
  action_type?: string;
  action_api?: string;
};

const ClientSyncForm: FC<props> = ({ action_type = "sync", action_api }) => {
  const bankForm = useForm<any>({
    mode: "onChange",
    defaultValues: {},
  });

  const queryClient = useQueryClient();
  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    formState: { errors },
  } = bankForm;

  const { mutate: syncData, isPending } = useMutation({
    mutationFn: async (syncData: any) => {
      const data = await postData(action_api, syncData);
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {
      console.log(data, "su");
      if (data?.message) {
        toast.success(data?.message);
      }
      queryClient.invalidateQueries({ queryKey: ["client-sync"] });
    },
    onError: (error: any) => {
      if (useParseError(error)) {
        toast.error(useParseError(error));
      }
    },
  });
  const onSubmit = async (data: any) => {
    console.log(data);
    syncData(data);
  };

  const onError = async (data: any) => {
    console.error(data);
  };

  return (
    <>
      <div>
        <FormProvider {...bankForm}>
          <form
            onSubmit={handleSubmit(onSubmit, onError)}
            className="h-10 w-full"
          >
            <div className="flex">
              <div className="w-64 md:w-72 lg:w-72">
                <DropdownList
                  name="network"
                  idName="network_id"
                  getLabel={(network) => network?.name}
                  isMulti={false}
                />
              </div>
              <div>
                <Button
                  className={`ml-2 ${action_type === "sync" ? "bg-blue-700" : "bg-green-700"}`}
                  size="md"
                  onClick={() => inputRef.current?.click()}
                >
                  {isPending && (
                    <Spinner
                      aria-label="Spinner button example"
                      size="sm"
                      className="mr-1"
                    />
                  )}
                  {action_type === "sync" ? (
                    <>
                      <MdDownload className="mt-1 mr-1 text-xs" />
                      Load
                    </>
                  ) : (
                    <>
                      <GrUpdate className="mt-1 mr-1 text-xs" />
                      All Sync
                    </>
                  )}
                </Button>
              </div>
            </div>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
      </div>
    </>
  );
};

export default ClientSyncForm;