import { reactive } from 'vue';

export interface Toast {
  id: number;
  kind: 'info' | 'success' | 'error';
  message: string;
}

const state = reactive<{ items: Toast[] }>({ items: [] });
let seq = 0;

export function useToasts() {
  function push(kind: Toast['kind'], message: string, ttl = 4000) {
    const id = ++seq;
    state.items.push({ id, kind, message });
    if (ttl > 0) setTimeout(() => dismiss(id), ttl);
    return id;
  }
  function dismiss(id: number) {
    const i = state.items.findIndex((t) => t.id === id);
    if (i >= 0) state.items.splice(i, 1);
  }
  return {
    toasts: state.items,
    info: (m: string) => push('info', m),
    success: (m: string) => push('success', m),
    error: (m: string) => push('error', m, 6000),
    dismiss,
  };
}