import { toast } from "sonner";

import "./OperationStatusToast.css";

export type OperationStatusToastVariant = "saving" | "deleting";
export type OperationStatusToastId = string | number;

interface OperationStatusToastProps {
  variant: OperationStatusToastVariant;
  message?: string;
}

const defaultMessages: Record<OperationStatusToastVariant, string> = {
  saving: "Saving",
  deleting: "Deleting",
};

export const OperationStatusToast = ({
  variant,
  message,
}: OperationStatusToastProps) => (
  <div
    className={`akashic-operation-status-toast akashic-operation-status-toast--${variant}`}
    role="status"
    aria-live="polite"
    aria-atomic="true"
  >
    <span
      className="akashic-operation-status-toast__spinner"
      aria-hidden="true"
    />
    <span className="akashic-operation-status-toast__message">
      {message ?? defaultMessages[variant]}
    </span>
  </div>
);

const showOperationStatusToast = (
  variant: OperationStatusToastVariant,
  message?: string,
): OperationStatusToastId =>
  toast.custom(
    () => <OperationStatusToast variant={variant} message={message} />,
    {
      duration: Infinity,
      position: "bottom-right",
    },
  );

export const operationStatusToast = {
  saving: (message?: string): OperationStatusToastId =>
    showOperationStatusToast("saving", message),
  deleting: (message?: string): OperationStatusToastId =>
    showOperationStatusToast("deleting", message),
  dismiss: (toastId: OperationStatusToastId): void => {
    toast.dismiss(toastId);
  },
};