/**
 * „Mein Audi" — Sammelseite mit Fotogalerie und Wegen zu den Unterseiten.
 * Vorlage: `vAudi()` im alten Panel.
 */

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

import { useDaten } from "../daten/DatenKontext"
import { de, deOderStrich } from "../format"
import type { SeitenName } from "../navigation"
import { NaviKachel } from "./bausteine"
import { Bild } from "./Bild"
import { BILDPLAETZE } from "./bilder"

export function MeinAudi({ geheZu }: { geheZu: (name: SeitenName, id?: string) => void }) {
  const { fahrzeug, einstellungen } = useDaten()
  if (!fahrzeug || !einstellungen) return null

  const aktiverSatz =
    fahrzeug.reifen.aktiv === "Winter" ? fahrzeug.reifen.winter : fahrzeug.reifen.sommer

  return (
    <>
      <Tile>
        <span className="ads-eyebrow">Fotogalerie</span>
        <div className="dm-galerie">
          {BILDPLAETZE.map((platz) => (
            <Bild
              key={platz.datei}
              datei={platz.datei}
              beschreibung={platz.beschreibung}
              name={platz.name}
              groesse="mini"
            />
          ))}
        </div>
        <p className="dm-fussnote">
          Fotos verwaltest du in den Einstellungen. Fehlende Bilder zeigen ihren erwarteten
          Dateinamen, damit klar ist, was wohin gehört.
        </p>
      </Tile>

      <div className="dm-raster">
        <NaviKachel
          titel="Fahrzeugdaten"
          wert={fahrzeug.fin || "Technik und Ausstattung"}
          beiKlick={() => geheZu("ident")}
        />
        <NaviKachel
          titel="Batterie"
          wert={
            fahrzeug.batteriespannung != null
              ? `${de(fahrzeug.batteriespannung, 2)} V`
              : "Kein Spannungssensor"
          }
          beiKlick={() => geheZu("battverlauf")}
        />
        <NaviKachel titel="Service" wert="Termine und Servicebuch" beiKlick={() => geheZu("service")} />
        <NaviKachel
          titel="Reifen"
          wert={`${fahrzeug.reifen.aktiv} · ${deOderStrich(aktiverSatz.km)} km`}
          beiKlick={() => geheZu("reifen")}
        />
        <NaviKachel
          titel="Versicherung & Steuer"
          wert="Beitrag, Vertrag, Kfz-Steuer"
          beiKlick={() => geheZu("vers")}
        />
      </div>
    </>
  )
}
