import { toast as sonnerToast } from "sonner";
import { ToastProps } from "./types";
import { Notification } from "@mantine/core";
import { ShieldCheckIcon, WarningCircleIcon } from "@phosphor-icons/react";

const makeToast = (toast: Omit<ToastProps, "id">) => {
  return sonnerToast.custom((id) => (
    <Toast
      id={id}
      title={toast.title}
      description={toast.description}
      withCloseButton={toast.withCloseButton}
      icon={toast.icon}
      color={toast.color}
      loading={!!toast.loading}
    />
  ));
};

function success(toast: Omit<ToastProps, "id"> | string) {
  const config = typeof toast === "string" ? { description: toast } : toast;
  return makeToast({
    ...config,
    icon: <ShieldCheckIcon color="lightgreen" size={48} weight="fill" />,
  });
}

function error(toast: Omit<ToastProps, "id"> | string) {
  const config = typeof toast === "string" ? { description: toast } : toast;
  return makeToast({
    ...config,
    icon: <WarningCircleIcon color="lightcoral" size={48} weight="fill" />,
  });
}

function Toast(props: ToastProps) {
  const { title, description, withCloseButton, icon, loading } = props;

  return (
    <Notification
      miw="md"
      color={"rgba(0,0,0,0)"}
      withBorder
      withCloseButton={!!withCloseButton}
      loading={loading}
      title={title}
      icon={icon}
    >
      {description}
    </Notification>
  );
}

export default {
  success,
  error,
};
