export function render(buffer, cursor, selection) {
  const range = selectedRange(selection);

  const html = buffer.map((line, i) => {
    const chars = [];
    for (let c = 0; c <= line.length; c++) {
      if (i === cursor.line && c === cursor.col)
        chars.push(`<span class="cursor"></span>`);
      if (c < line.length) {
        const inSel = range &&
          (i > range.start.line || (i === range.start.line && c >= range.start.col)) &&
          (i < range.end.line || (i === range.end.line && c < range.end.col));
        const ch = escapeChar(line[c]);
        chars.push(inSel ? `<span class="selection">${ch}</span>` : ch);
      }
    }
    if (i === cursor.line && cursor.col >= line.length)
      chars.push(`<span class="cursor"></span>`);
    return `<span>${chars.join("")}</span>`;
  });

  document.getElementById("text").innerHTML = html.join("<br>");
}

function selectedRange(selection) {
  if (selection.anchor === null || selection.head === null) return null;
  const a = selection.anchor;
  const h = selection.head;
  if (a.line === h.line && a.col === h.col) return null;
  if (a.line < h.line || (a.line === h.line && a.col < h.col))
    return { start: { ...a }, end: { ...h } };
  return { start: { ...h }, end: { ...a } };
}

function escapeChar(c) {
  if (c === "&") return "&amp;";
  if (c === "<") return "&lt;";
  if (c === ">") return "&gt;";
  return c;
}