"use client";
import { User } from "@/interfaces/User";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { GrUpdate } from "react-icons/gr";
import { toast } from "react-toastify";
import Button from "../Button";
import DropdownList from "../common/Dropdown";
import Spinner from "../spinner";

const MikrotikSyncForm: FC = () => {
  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 axios.post(`/api/sync-clients`, syncData);
      return data.data as User;
    },
    onSuccess: (data) => {
      toast.success("Sync successful!");
      queryClient.invalidateQueries({ queryKey: ["sync-clients"] });
    },
    onError: (error: any) => {
      if (error?.response?.data?.error?.error?.message) {
        toast.error(error?.response?.data?.error?.error?.message);
      }
    },
  });
  const onSubmit = async (data: any) => {
    console.log(data);
    syncData(data);
  };

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

  return (
    <>
      <div className="p-5">
        <FormProvider {...bankForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
              <div className="flex">
                <div className="mt-1 w-96">
                  <DropdownList
                    name="network"
                    idName="network_id"
                    getLabel={(network) => network?.name}
                    isMulti={false}
                  />
                </div>
                <div>
                  <Button
                    className="ml-2 mt-2"
                    size="sm"
                    color="blue"
                    onClick={() => inputRef.current?.click()}
                  >
                    {isPending && (
                      <Spinner
                        aria-label="Spinner button example"
                        size="sm"
                        className="mr-1"
                      />
                    )}
                    <GrUpdate className="mt-1 mr-1 text-xs" />
                    Sync
                  </Button>
                </div>
              </div>
            </div>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
      </div>
    </>
  );
};

export default MikrotikSyncForm;