import { $, h } from './dom.js';

const DURATION_MS = 6000;
const MAX_VISIBLE = 3; // a big jump (import, long absence) must not bury the page in messages

/**
 * Show a message for a few seconds.
 * `sticky` messages are important: they stay until clicked, and routine messages never push them away.
 */
export function showToast(message, { error = false, sticky = false } = {}) {
  const container = $('#toasts');
  const classes = ['toast', error && 'toast--error', sticky && 'toast--sticky'].filter(Boolean);
  const toast = h('p', { class: classes.join(' '), text: message });

  if (sticky) {
    toast.setAttribute('role', 'alert');
    toast.addEventListener('click', () => toast.remove());
  } else {
    setTimeout(() => toast.remove(), DURATION_MS);
  }
  container.append(toast);

  const routine = [...container.children].filter((el) => !el.classList.contains('toast--sticky'));
  for (const old of routine.slice(0, Math.max(0, routine.length - MAX_VISIBLE))) old.remove();
}