import { writable } from "svelte/store";

type ToastType = "info" | "error" | "success" | "warning";

export interface Toast {
  id: number;
  message: string;
  type: ToastType;
}

export const toastStore = writable(<Toast[]>[]);

// Display toast
export const addToast = (message: string, type: ToastType = "info") => {
  const id = Math.random();
  const newToast = { id, message, type };
  toastStore.update((toasts: Toast[]) => [...toasts, newToast]);
};

// Store toast in session storage and display it at next page load
export const addSessionToast = (message: string, type: ToastType = "info") => {
  const toast = JSON.stringify({ message, type });
  sessionStorage.setItem("toast", toast);
};

export const removeToast = (id: number) =>
  toastStore.update((toasts: Toast[]) =>
    toasts.filter(toast => toast.id !== id)
  );