import get from "lodash.get";
import { AlertTriangle, Check, Loader2 } from "lucide-react";
import { toast } from "sonner";

export const actionToast = async (data: {
  task: () => Promise<any>;
  before?: () => any;
  success?: () => any;
  after?: () => any;
  failed?: () => any;
  msg_succes?: string;
  msg_error?: string;
  msg_load?: string;
  hidden_icon?: boolean;
}) => {
  const {
    task,
    before,
    after,
    success,
    msg_succes,
    msg_error,
    msg_load,
    failed,
    hidden_icon,
  } = data;

  try {
    if (typeof before === "function") before();
    toast.info(
      <>
        <Loader2
          className={cx(
            "h-4 w-4 animate-spin-important",
            css`
              animation: spin 1s linear infinite !important;
              @keyframes spin {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
            `
          )}
        />
        {msg_load ? msg_load : " Load..."}
      </>,
      {
        duration: Infinity,
      }
    );
    if (typeof task === "function") await task();
    setTimeout(() => {
      toast.dismiss();
      setTimeout(() => {
        toast.success(
          <div
            className={cx(
              "cursor-pointer flex flex-col select-none items-stretch flex-1 w-full"
            )}
            onClick={() => {
              toast.dismiss();
            }}
          >
            <div className="flex text-green-700 items-center success-title font-semibold">
              <Check className="h-6 w-6 mr-1 " />
              {msg_succes ? msg_succes : " Success"}
            </div>
          </div>
        );
      }, 100);
      if (typeof after === "function") after();
      if (typeof success === "function") success();
    }, 100);
  } catch (ex: any) {
    setTimeout(() => {
      if (typeof failed === "function") failed();
      toast.dismiss();
      setTimeout(() => {
        toast.error(
          <div className="flex flex-col w-full">
            <div className="flex text-red-600 items-center">
              {hidden_icon !== true ? (
                <AlertTriangle className="h-4 w-4 mr-1" />
              ) : (
                <></>
              )}
              {msg_error ? msg_error : " Failed"}{" "}
              {get(ex, "response.data.meta.message") || ex.message}.
            </div>
          </div>,
          {
            dismissible: true,
            className: css`
              background: #ffecec;
              border: 2px solid red;
            `,
          }
        );
      }, 100);
    }, 100);
  }
};
