import { $, escapeAttr, state } from "../core.js";
import { glyphSvg } from "../glyphs.js";

function greeting() {
  const h = new Date().getHours();
  if (h < 5 || h >= 23) return "Noch wach?";
  if (h < 11) return "Guten Morgen.";
  if (h < 18) return "Willkommen zurück.";
  return "Guten Abend.";
}

/* ── Wer angemeldet ist ────────────────────────────────────────────────────
 *
 * Stand früher rechts in der Menüleiste. Dort war es das einzige Stück, das
 * die HoneyBar in den Apps nicht hat — beide sollen aber gleich aussehen, sonst
 * merkt man beim Wechsel, dass es zwei verschiedene Leisten sind. Auf dem
 * Schreibtisch ist ohnehin Platz dafür, und die Begrüßung gehört dazu.
 */
function userHtml() {
  const bild = state.me && state.me.picture
    ? `<img class="uw-bild" src="${escapeAttr(state.me.picture)}" alt="" />`
    : `<span class="uw-bild uw-leer">${glyphSvg("chip")}</span>`;
  return `
    <div class="uw">
      ${bild}
      <div class="uw-text">
        <b class="uw-name">${state.cfg.user}</b>
        <span class="uw-gruss">${greeting()}</span>
        <span class="uw-host">${state.cfg.user}@${state.cfg.hostname}</span>
      </div>
    </div>`;
}

export function renderUser() {
  const tile = $("userTile");
  const desk = $("userDesk");
  const desktopMode = state.settings.mode === "desktop";
  const html = userHtml();

  tile.hidden = desktopMode;
  desk.hidden = !desktopMode;
  tile.querySelector(".user-body").innerHTML = html;
  desk.innerHTML = html;
}