import { postData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { FC } from "react";
import { HiOutlineRefresh } from "react-icons/hi";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import Spinner from "../spinner";

type props = {
  smsId: string;
};

const SmsResend: FC<props> = ({ smsId }) => {
  const queryClient = useQueryClient();
  const { mutate: smsResend, isPending } = useMutation({
    mutationFn: async (payload: any) => {
      const data = await postData(`/api/v1/communication-queue/${smsId}/resend`, payload as any);
      console.log(data);
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ["communication-queue"] });
      toast.success(`Resend sms successful!`);
    },
    onError: (error: any) => {
      toast.error(useParseError(error));
    },
  });
  return (
    <div>
      <ActionButton type="any" onClick={() => smsResend({ sms: "single" })}>
        <div className="flex">
          <div className="mt-1">
            {!isPending ? (
              <HiOutlineRefresh />
            ) : (
              <div className="-mt-1 mr-1">
                <Spinner size="xs" />
              </div>
            )}
          </div>
          <div className="ml-1">Resend</div>
        </div>
      </ActionButton>
    </div>
  );
};

export default SmsResend;