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

/* ── Wetter ────────────────────────────────────────────────────────────────
 *
 * Der Server holt es und legt es zehn Minuten beiseite; hier wird nur gezeigt,
 * was er hergibt. Kein Ort eingestellt oder Dienst nicht erreichbar: 204, und
 * das Widget bleibt weg. Eine Zahl von gestern wäre schlechter als keine.
 */
export async function loadWeather() {
  if (!state.settings.weatherCity) {
    state.weather = null;
    renderWeather();
    return;
  }
  try {
    state.weather = await api("/api/weather");
  } catch {
    state.weather = null;
  }
  renderWeather();
}

function weatherHtml(w) {
  return `
    <div class="wx">
      <span class="wx-glyph">${glyphSvg(w.glyph)}</span>
      <div class="wx-text">
        <b class="wx-temp">${Math.round(w.grad)}°</b>
        <span class="wx-desc">${w.text}</span>
        <span class="wx-city">${w.ort}</span>
      </div>
    </div>`;
}

export function renderWeather() {
  const w = state.weather;
  const tile = $("wxTile");
  const desk = $("wxDesk");
  const bar = $("mbWx");
  const desktopMode = state.settings.mode === "desktop";

  // Das Widget: Fenster im Terminal-Modus, Schild auf dem Schreibtisch.
  const alsWidget = state.settings.weatherDesk === "on" && w;
  tile.hidden = !alsWidget || desktopMode;
  desk.hidden = !alsWidget || !desktopMode;
  if (alsWidget) {
    const html = weatherHtml(w);
    tile.querySelector(".wx-body").innerHTML = html;
    desk.innerHTML = html;
  }

  // Und in der HoneyBar. Die Menüleiste hier ist zwar anderer Code als
  // honeybar.js in den Apps, aber für den, der davorsitzt, dieselbe HoneyBar —
  // ein Schalter, der nur woanders wirkt, wäre nicht zu erklären.
  const inBar = state.settings.weatherBar === "on" && w;
  bar.hidden = !inBar;
  if (inBar) {
    bar.innerHTML = `${glyphSvg(w.glyph)}<span class="mb-wx-temp">${Math.round(w.grad)}°</span>`;
    bar.title = `${w.ort}: ${w.text}, ${Math.round(w.grad)}°`;
  }
}