// Lightweight toast stack. Used by buttons/actions that want to confirm
// they fired. Rendered by components/ToastStack.vue in the default layout.

export type ToastTone = 'info' | 'ok' | 'warn' | 'bad'

export interface Toast {
  id: number
  tone: ToastTone
  message: string
  hint?: string
}

const toasts = ref<Toast[]>([])
let counter = 0

export const useToast = () => {
  function push(tone: ToastTone, message: string, hint?: string) {
    const id = ++counter
    toasts.value = [...toasts.value, { id, tone, message, hint }]
    const ttl = tone === 'bad' ? 7000 : 4000
    setTimeout(() => {
      toasts.value = toasts.value.filter((t) => t.id !== id)
    }, ttl)
  }
  function dismiss(id: number) {
    toasts.value = toasts.value.filter((t) => t.id !== id)
  }
  return {
    toasts,
    push,
    info: (m: string, h?: string) => push('info', m, h),
    ok: (m: string, h?: string) => push('ok', m, h),
    warn: (m: string, h?: string) => push('warn', m, h),
    bad: (m: string, h?: string) => push('bad', m, h),
    dismiss,
  }
}