import { escapeHtml } from '/static/portal/common/formatters.js';

function region() {
  let target = document.querySelector('[data-toast-region]');
  if (!target) {
    target = document.createElement('div');
    target.className = 'toast-region';
    target.dataset.toastRegion = '';
    target.setAttribute('aria-live', 'polite');
    document.body.append(target);
  }
  return target;
}

export function showToast(message, tone = 'success') {
  const item = document.createElement('div');
  item.className = `toast toast--${tone}`;
  item.innerHTML = `<span class="toast__indicator" aria-hidden="true"></span><span>${escapeHtml(message)}</span>`;
  region().append(item);
  requestAnimationFrame(() => item.classList.add('toast--visible'));
  window.setTimeout(() => {
    item.classList.remove('toast--visible');
    window.setTimeout(() => item.remove(), 220);
  }, 3600);
}