import { readonly, ref } from 'vue'

const toasts = ref([])
let toastSeq = 0

function dismissToast(id) {
  toasts.value = toasts.value.filter((toast) => toast.id !== id)
}

function showToast(message, { type = 'info', duration = 2600 } = {}) {
  if (!message) return ''
  const id = `toast-${++toastSeq}`
  toasts.value = [...toasts.value, { id, message, type }]

  if (duration > 0) {
    window.setTimeout(() => dismissToast(id), duration)
  }

  return id
}

export function useToast() {
  return {
    toasts: readonly(toasts),
    dismissToast,
    showToast,
    success: (message, options = {}) => showToast(message, { type: 'success', ...options }),
    error: (message, options = {}) => showToast(message, { type: 'error', ...options }),
    info: (message, options = {}) => showToast(message, { type: 'info', ...options }),
  }
}