// Generated, do not edit. sha256:0bce2d8ce656c1145d2eaf8627da39c4fe16f1583c0379c2a0fa2919e295eae7
import { t } from '../i18n/index.js';
import { renderAiProposals } from '../actions/ai-proposals-widget.js';
import { renderReconcile } from '../actions/reconcile-widget.js';
import { renderInterestWidget } from '../actions/interest-widget.js';
import { renderValuationWidget } from '../actions/valuation-widget.js';
import { renderReservationsWidget } from '../actions/reservations-widget.js';
import { fmtInt } from '../ui/format.js';
import { esc } from '../ui/escape.js';
import { CHECK } from '../ui/icons.js';

export const title = () => t('actions.title');
export const headerInColumn = true;

const BLOKKEN = [
  { id: 'act-ai', label: () => t('aiProposals.title') },
  { id: 'act-reconcile', label: () => t('home.reconcile') },
  { id: 'act-interest', label: () => t('actions.interestTitle') },
  { id: 'act-valuation', label: () => t('actions.valuationTitle') },
  { id: 'act-reservation', label: () => t('reservations.title') },
];

export async function render(el) {
  el.innerHTML = `
    <div class="page-layout">
      <aside class="page-aside act-aside">
        <div class="act-block">
          <div class="t-label">${t('actions.openTitle')}</div>
          <div class="t-num-lg" data-act="total">…</div>
          <div class="t-muted-cell" data-act="totalSub"></div>
        </div>
        <nav class="act-jump" data-jump></nav>
      </aside>
      <div class="page-body">
        <div class="page-header"><h1 class="page-title">${esc(title())}</h1></div>
        <div id="act-ai"></div>
        <div id="act-reconcile" class="mt-lg"></div>
        <div id="act-interest" class="mt-lg"></div>
        <div id="act-valuation" class="mt-lg"></div>
        <div id="act-reservation" class="mt-lg"></div>
      </div>
    </div>`;

  const refresh = () => render(el);
  const aantal = {};
  for (const [id, teken] of [['act-ai', renderAiProposals], ['act-reconcile', renderReconcile],
    ['act-interest', renderInterestWidget], ['act-valuation', renderValuationWidget],
    ['act-reservation', renderReservationsWidget]]) {
    const host = el.querySelector('#' + id);
    if (!host) return;
    aantal[id] = await teken(host, refresh);
  }

  vulKolom(el, aantal);
}

function vulKolom(el, aantal) {
  const zichtbaar = BLOKKEN.filter(b => aantal[b.id] != null);
  const totaal = zichtbaar.reduce((som, b) => som + aantal[b.id], 0);

  const zet = (sleutel, html) => {
    const e = el.querySelector(`[data-act="${sleutel}"]`);
    if (e) e.innerHTML = html;
  };
  zet('total', totaal ? fmtInt(totaal) : CHECK);
  zet('totalSub', totaal
    ? (totaal === 1 ? t('actions.openOne') : t('actions.openMany'))
    : t('actions.openNone'));

  const nav = el.querySelector('[data-jump]');
  if (!nav) return;
  nav.innerHTML = zichtbaar.map(b => `
    <button type="button" class="act-jump-item${aantal[b.id] ? '' : ' is-done'}" data-to="${b.id}">
      <span class="act-jump-label">${esc(b.label())}</span>
      <span class="act-jump-count">${aantal[b.id] ? fmtInt(aantal[b.id]) : CHECK}</span>
    </button>`).join('');

  nav.onclick = e => {
    const knop = e.target.closest('[data-to]');
    if (!knop) return;
    const doel = el.querySelector('#' + knop.dataset.to);
    if (doel) doel.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
}