import { readonly } from 'vue'

export type ToastType = 'success' | 'error' | 'info'

export interface Toast {
  id: number
  type: ToastType
  text: string
}

const TOAST_STATE_KEY = 'hnh-map-toasts'
const DEFAULT_DURATION_MS = 4000

let nextId = 0

export function useToast() {
  const toasts = useState<Toast[]>(TOAST_STATE_KEY, () => [])

  function dismiss(id: number) {
    toasts.value = toasts.value.filter((t) => t.id !== id)
  }

  function show(type: ToastType, text: string, durationMs = DEFAULT_DURATION_MS) {
    const id = ++nextId
    toasts.value = [...toasts.value, { id, type, text }]
    if (durationMs > 0 && import.meta.client) {
      setTimeout(() => dismiss(id), durationMs)
    }
  }

  return {
    toasts: readonly(toasts),
    success: (text: string, durationMs?: number) => show('success', text, durationMs),
    error: (text: string, durationMs?: number) => show('error', text, durationMs),
    info: (text: string, durationMs?: number) => show('info', text, durationMs),
    dismiss,
  }
}