// Generated, do not edit. sha256:d20de9a177bb432b6c8f10236c35149637d208ed9ad948a3457ff3eea687978a
import { listDueReservations } from '../data/reservations.js';
import { t } from '../i18n/index.js';
import { fmtUnit, val } from '../ui/format.js';
import { taskCardHtml, nothingPendingHtml } from '../ui/task-card.js';
import { esc } from '../ui/escape.js';
import { localDateNl } from '../../shared/time.js';
import { bookReservationFlow, reservationAccount, reservationDir, reservationMeta, settleReservationFlow } from './reservation-book.js';

export async function renderReservationsWidget(host, refresh) {
  const due = await listDueReservations();
  const body = due.length === 0
    ? nothingPendingHtml()
    : due.map((r, i) => `<div class="flex gap-md" style="align-items:center;flex-wrap:wrap;margin-top:0.4rem">`
        + `<span class="t-body-sm">${esc(reservationAccount(r).name)} · ${esc(localDateNl(r.occurredAt))} · `
        + `${t(reservationDir(r) === 'out' ? 'reservations.dirOut' : 'reservations.dirIn')} `
        + `${val(fmtUnit(r.amount, reservationMeta(r)))}${r.note ? ` · ${esc(r.note)}` : ''}</span>`
        + `<button class="btn btn-primary btn-sm" data-res-book="${i}">${t('reservations.book')}</button>`
        + `<button class="btn btn-ghost btn-sm" data-res-settle="${i}">${t('reservations.settle')}</button></div>`).join('');
  host.innerHTML = taskCardHtml({ title: t('reservations.title'), body });
  host.querySelectorAll('[data-res-book]').forEach(b => b.onclick = async () => {
    if (await bookReservationFlow(due[Number(b.dataset.resBook)])) refresh();
  });
  host.querySelectorAll('[data-res-settle]').forEach(b => b.onclick = async () => {
    if (await settleReservationFlow(due[Number(b.dataset.resSettle)])) refresh();
  });
  return due.length;
}