import { api, $, state } from "../core.js";
import { glyphSvg } from "../glyphs.js";
import { widgetAnmelden, widgetsLaden } from "./rahmen.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.
 */
widgetAnmelden({
  id: "wetter",
  titel: "wetter",
  // Der eigene Schalter — unabhängig von dem für die HoneyBar.
  sichtbar: () => state.settings.weatherDesk === "on",
  leer: "verbergen",
  takt: 10 * 60 * 1000, // derselbe Takt, in dem der Server seinen Speicher erneuert

  async laden() {
    if (!state.settings.weatherCity) {
      state.weather = null;
      return false;
    }
    try {
      state.weather = await api("/api/weather");
    } catch (e) {
      // Auch im Fehlerfall den alten Stand wegwerfen: Das Widget zeigt dann
      // „nicht erreichbar", und in der Leiste verschwindet das Symbol. Eine
      // Temperatur von vorhin, die aussieht wie von jetzt, wäre schlechter.
      state.weather = null;
      throw e;
    }
    // 204: kein Ort, kein Dienst — der Aufrufhelfer gibt dann nichts zurück.
    if (!state.weather || !state.weather.glyph) {
      state.weather = null;
      return false;
    }
    return true;
  },

  inhalt() {
    const w = state.weather;
    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>`;
  },
});

/**
 * 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.
 *
 * Sie hängt am selben geladenen Stand, hat aber ihren eigenen Schalter und
 * gehört nicht in den Widget-Rahmen: Sie ist kein Widget, sondern ein Teil der
 * Leiste.
 */
export function renderWeatherBar() {
  const bar = $("mbWx");
  if (!bar) return;
  const w = state.weather;
  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)}°`;
  }
}

/** Beides zusammen: Widget und Leiste hängen am selben Abruf. */
export async function loadWeather() {
  await widgetsLaden("wetter");
  renderWeatherBar();
}