// Generated, do not edit. sha256:ce839cfe04c94b47ff548f20a8992356bcbc456e5e878e1829f94a38a663c5f1
import { currentNotifications, notificationDetail, dismissNotification } from '../data/notifications.js';
import { localDateNl } from '../../shared/time.js';
import { t } from '../i18n/index.js';
import { TARGETS, NOTIFICATION_TARGETS, NOTIFICATION_PRIORITY, targetHash } from '../../shared/config.js';
import { CHECK, CHEVRON_RIGHT } from '../ui/icons.js';
import { esc } from '../ui/escape.js';
import { taskCardHtml, nothingPendingHtml } from '../ui/task-card.js';

const targetFor = kind => targetHash(NOTIFICATION_TARGETS[kind] || TARGETS.ACTIONS);

const rank = kind => NOTIFICATION_PRIORITY.indexOf(kind);

async function detailFor(n) {
  if (n.kind === 'schedule_ended') {
    const d = await notificationDetail(n);
    if (!d) return '';
    return `${d.account} · ${d.asset}${d.extra ? ` +${d.extra}` : ''}`;
  }
  return t('notify.hint.' + n.kind);
}

async function rowHtml(n) {
  const target = targetFor(n.kind);
  const detail = await detailFor(n);
  const date = localDateNl(n.createdAt);
  const info = n.kind === 'schedule_ended' ? ' is-info' : '';
  return `<div class="notify-row${info}" data-target="${target}" data-kind="${n.kind}" tabindex="0">
      <button type="button" class="notify-count" data-dismiss="${n.id}" title="${t('notify.dismiss')}" aria-label="${t('notify.dismiss')}">`
        + `<span class="notify-n">${n.count}</span><span class="notify-check" aria-hidden="true">${CHECK}</span></button>
      <div class="notify-kind">${t('notify.' + n.kind)}</div>
      ${detail ? `<div class="notify-detail" title="${esc(detail)}">${esc(detail)}</div>` : ''}
      <div class="notify-side">
        <span class="notify-date">${date || ''}</span>
        <span class="notify-go" aria-hidden="true">${CHEVRON_RIGHT}</span>
      </div>
    </div>`;
}

export async function renderNotifications(host, onChanged) {
  const rerender = () => renderNotifications(host, onChanged);
  const items = await currentNotifications();
  const sorted = [...items].sort((a, b) => rank(a.kind) - rank(b.kind));

  const body = sorted.length === 0
    ? nothingPendingHtml()
    : `<div class="notify-list">${(await Promise.all(sorted.map(rowHtml))).join('')}</div>`;

  host.innerHTML = taskCardHtml({ title: t('notify.title'), body });

  host.querySelectorAll('[data-dismiss]').forEach(b => b.onclick = async e => {
    e.stopPropagation();
    await dismissNotification(Number(b.dataset.dismiss));
    (onChanged || rerender)();
  });

  host.querySelectorAll('.notify-row').forEach(row => {
    const go = () => { location.hash = row.dataset.target; };
    row.onclick = e => { if (e.target.closest('[data-dismiss]') || e.target.closest('a')) return; go(); };
    row.onkeydown = e => { if (e.key === 'Enter' && e.target === row) go(); };
  });
}