/** Trace panel: HUD event display. */

import { esc, scroll } from './util.js';

let traceEl;

export function initTrace() {
  traceEl = document.getElementById('trace');
}

export function addTrace(node, event, text, cls, detail) {
  if (!traceEl) return;
  const line = document.createElement('div');
  line.className = 'trace-line' + (detail ? ' expandable' : '');

  const ts = new Date().toLocaleTimeString('de-DE', {
    hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit',
    fractionalSecondDigits: 1,
  });

  line.innerHTML =
    '<span class="trace-ts">' + ts + '</span>' +
    '<span class="trace-node ' + esc(node) + '">' + esc(node) + '</span>' +
    '<span class="trace-event">' + esc(event) + '</span>' +
    '<span class="trace-data' + (cls ? ' ' + cls : '') + '">' + esc(text) + '</span>';

  traceEl.appendChild(line);

  if (detail) {
    const detailEl = document.createElement('div');
    detailEl.className = 'trace-detail';
    detailEl.textContent = detail;
    traceEl.appendChild(detailEl);
    line.addEventListener('click', () => detailEl.classList.toggle('open'));
  }

  scroll(traceEl);
}

export function clearTrace() {
  if (traceEl) traceEl.innerHTML = '';
}