/**
 * Batteriespannungs-Messwertliste — ein Eintrag pro Tag (dieselben Daten wie
 * das Diagramm in Batterie.tsx), aber als Liste: Datum, Uhrzeit, Spannung,
 * Außentemperatur. Erreichbar über das Listen-Symbol oben rechts im
 * Diagramm.
 *
 * Jede Zeile lässt sich wie Fahrten/Tankvorgänge nach links wegwischen, um
 * sie zu löschen (Zeilenmenue - Wischgeste plus sichtbares Menü, siehe dort).
 *
 * Liegt der Tagesminimalwert über AGM_RUHE_MAX_V (Batterie.tsx), wurde er nie
 * in Ruhe gemessen (das Fahrzeug stand an diesem Tag nie lange genug still) -
 * die Zeile zeigt dann "Generatorspannung" statt so zu tun, als sei es ein
 * Ruhewert.
 */

import { useEffect, useState } from "react"

import { Pill, Tile } from "@audi-dash/ui"

import { ENTITAETEN } from "../api"
import { useDaten } from "../daten/DatenKontext"
import { datum, datumZeit, de } from "../format"
import { Leerzustand } from "./bausteine"
import { AGM_RUHE_MAX_V } from "./Batterie"
import { Zeilenmenue } from "./Zeilenmenue"

interface Tageswert {
  datum: string
  min: number | null
  max: number | null
  min_ts?: string
  min_temp_c?: number | null
}

export function BatterieListe() {
  const { api } = useDaten()
  const [verlauf, setzeVerlauf] = useState<Tageswert[] | null>(null)
  const [fehler, setzeFehler] = useState(false)

  const neuLaden = () => {
    void api.rest
      .datenLesen<Tageswert[]>(ENTITAETEN.batterieverlauf)
      .then((daten) => setzeVerlauf(Array.isArray(daten) ? daten : []))
      .catch(() => setzeFehler(true))
  }

  useEffect(neuLaden, [api])

  if (fehler) {
    return (
      <Leerzustand
        titel="Liste nicht abrufbar"
        text="Der Server hat die Messwertliste nicht geliefert. Beim nächsten Aufruf klappt es vielleicht wieder."
      />
    )
  }

  if (!verlauf) return <div className="dm-laden">Liste wird geladen …</div>

  const messwerte = verlauf.filter((t) => t.min != null).slice().reverse()

  if (messwerte.length === 0) {
    return (
      <Leerzustand
        titel="Keine Messwerte"
        text="Für dieses Fahrzeug liefert die Anbindung derzeit keinen Spannungssensor."
      />
    )
  }

  const loeschen = async (eintrag: Tageswert) => {
    await api.batterieverlaufEintragLoeschen(eintrag.datum)
    neuLaden()
  }

  return (
    <Tile>
      {messwerte.map((t) => (
        <Zeilenmenue
          key={t.datum}
          loeschFrage={`Messwert vom ${datum(t.datum)} löschen?`}
          beiLoeschen={() => void loeschen(t)}
          kinder={
            <div className="dm-listenzeile">
              <span className="dm-listenzeile__haupt">
                <span className="dm-listenzeile__titel">
                  {de(t.min!, 2)} V
                  <span className="dm-listenzeile__neben">
                    {t.min_temp_c != null ? `${de(t.min_temp_c, 1)} °C` : "—"}
                  </span>
                </span>
                <span className="dm-listenzeile__unter">
                  {t.min_ts ? datumZeit(t.min_ts) : datum(t.datum)}
                </span>
              </span>
              {t.min! > AGM_RUHE_MAX_V && <Pill>Generatorspannung</Pill>}
            </div>
          }
        />
      ))}
    </Tile>
  )
}
