"use client";
import { deleteRecord } from "@/utils/fetch";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button, Modal, Spinner } from "flowbite-react";
import { useRouter } from "next/navigation";
import { FC, useState } from "react";
import { HiOutlineExclamationCircle } from "react-icons/hi";
import { MdClose } from "react-icons/md";
import { toast } from "react-toastify";

type props = {
  packageId?: string;
  resellerId?: string;
  setRefetch: (x: boolean) => void;
};

const RemovePackage: FC<props> = ({ packageId, resellerId, setRefetch }) => {
  const queryClient = useQueryClient();
  const [isOpen, setOpen] = useState(false);
  const router = useRouter();
  const url = `/api/v1/remove-reseller-package/${packageId}/${resellerId}`;

  const {
    mutate: deletePackage,
    isPending,
    isSuccess,
  } = useMutation({
    mutationFn: async () => await deleteRecord(url),
    onSuccess: (data: any) => {
      setOpen(false);
      queryClient.invalidateQueries({ queryKey: ["packages"] });
      if (data?.success) {
        toast.success("Remove package from reseller successful!");
        setRefetch(true);
      } else {
        let message = data?.error?.message ?? "Unable to remove package";
        toast.error(message);
      }
      console.log(data, url);
      //  window.location.reload();
    },
    onError: (errors) => {
      console.log(errors);
      setOpen(false);
      toast.error("Remove package from reseller failed!");
    },
  });

  return (
    <>
      <Button
        className={`bg-red-600 text-white mt-4 disabled`}
        onClick={() => setOpen(true)}
      >
        <MdClose className="text-lg mt-0.5 mr-1" />
        Remove
      </Button>
      <Modal onClose={() => setOpen(false)} show={isOpen} size="md">
        <Modal.Header className="border-b-0 px-6 pb-0 pt-6">
          <span className="sr-only">Remove package</span>
        </Modal.Header>
        <Modal.Body className="px-6 pb-6 pt-0">
          <div className="flex flex-col items-center gap-y-6 text-center">
            <HiOutlineExclamationCircle className="text-7xl text-red-500" />
            <p className="text-xl text-gray-500">
              <span className="block text-red-500"></span>
              Are you sure you want to remove this package form reseller?
            </p>
            <div className="flex items-center gap-x-3">
              <Button color="failure" onClick={() => deletePackage()}>
                {isPending && <Spinner aria-label="Spinner button" size="sm" />}
                Yes, I'm sure
              </Button>
              <Button color="gray" onClick={() => setOpen(false)}>
                No, cancel
              </Button>
            </div>
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
};

export default RemovePackage;