import { escapeAttr, escapeHtml, state } from "../core.js";
import { glyphSvg } from "../glyphs.js";
import { widgetAnmelden } from "./rahmen.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 HoneyBars sind. Auf dem
 * Schreibtisch ist ohnehin Platz dafür, und die Begrüßung gehört dazu.
 *
 * Kein `laden`: Der Name steht schon im Zustand, seit die Seite ihn geholt hat.
 */
widgetAnmelden({
  id: "benutzer",
  titel: "angemeldet",
  inhalt() {
    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">${escapeHtml(state.cfg.user)}</b>
          <span class="uw-gruss">${greeting()}</span>
          <span class="uw-host">${escapeHtml(state.cfg.user)}@${escapeHtml(state.cfg.hostname)}</span>
        </div>
      </div>`;
  },
});