// Generated, do not edit. sha256:dd3cdccc38ee940cd5da182fe49a2feb4a0d00eb7f08ee8c95f1fe0e712cbd46
import { getAssetNote, setAssetNote } from '../data/asset-notes.js';
import { t } from '../i18n/index.js';
import { esc } from './escape.js';

const SAVE_DELAY_MS = 700;

function nuLokaal() {
  const d = new Date();
  const p = n => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
}

export function notesHtml() {
  return `<div class="notes">
      <div class="notes-add">
        <input type="datetime-local" class="input notes-when" data-notes-when aria-label="${esc(t('notes.when'))}" title="${esc(t('notes.when'))}">
        <input type="text" class="input notes-line" data-notes-line placeholder="${esc(t('notes.line'))}" aria-label="${esc(t('notes.line'))}" autocomplete="off">
      </div>
      <textarea class="input notes-body" data-notes-body placeholder="${esc(t('notes.body'))}" aria-label="${esc(t('notes.tab'))}"></textarea>
      <div class="notes-status t-caption t-muted" data-notes-status aria-live="polite"></div>
    </div>`;
}

export async function mountNotes(host, assetId) {
  const when = host.querySelector('[data-notes-when]');
  const line = host.querySelector('[data-notes-line]');
  const body = host.querySelector('[data-notes-body]');
  const status = host.querySelector('[data-notes-status]');
  if (!when || !line || !body) return;
  when.value = nuLokaal();
  let whenTouched = false;
  when.addEventListener('input', () => { whenTouched = true; });
  line.addEventListener('focus', () => { if (!whenTouched) when.value = nuLokaal(); });

  let opgeslagen = '';
  try { opgeslagen = (await getAssetNote(assetId))?.body || ''; } catch (e) { status.textContent = e.message; }
  body.value = opgeslagen;

  let timer = null;
  async function bewaar() {
    clearTimeout(timer); timer = null;
    const tekst = body.value;
    if (tekst === opgeslagen) return;
    status.textContent = t('notes.saving');
    try {
      await setAssetNote(assetId, tekst);
      opgeslagen = tekst;
      status.textContent = t('notes.saved');
    } catch (e) { status.textContent = e.message; }
  }
  body.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(bewaar, SAVE_DELAY_MS); });
  body.addEventListener('blur', bewaar);

  line.addEventListener('keydown', e => {
    if (e.key !== 'Enter') return;
    e.preventDefault();
    const tekst = line.value.trim();
    if (!tekst) return;
    const stempel = (when.value || nuLokaal()).replace('T', ' ');
    const rest = body.value.replace(/^\s+/, '');
    body.value = `${stempel}  ${tekst}${rest ? `\n${rest}` : ''}`;
    line.value = '';
    whenTouched = false;
    when.value = nuLokaal();
    bewaar();
  });
}