/**
 * Fahrzeugdaten: Identität, technisches Datenblatt, Ausstattung.
 * Vorlage: `vIdent()` im alten Panel. Rein anzeigend — die Inhalte pflegt
 * man im Profil, nicht hier.
 */

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

import { useDaten } from "../daten/DatenKontext"
import { datum, de } from "../format"
import { Wertzeile, Werteliste } from "./bausteine"

interface TechnikGruppe {
  gruppe?: string
  posten?: [string, string][]
}

interface AusstattungGruppe {
  gruppe?: string
  sonder?: string[]
  serie?: string[]
}

export function Fahrzeugdaten() {
  const { fahrzeug, einstellungen } = useDaten()
  if (!fahrzeug || !einstellungen) return null

  const technik = Array.isArray(fahrzeug.technik)
    ? (fahrzeug.technik as TechnikGruppe[])
    : (Object.values(fahrzeug.technik) as TechnikGruppe[])
  const ausstattung = Array.isArray(fahrzeug.ausstattung)
    ? (fahrzeug.ausstattung as AusstattungGruppe[])
    : []

  return (
    <>
      <Tile>
        <span className="ads-eyebrow">Identität</span>
        <Werteliste
          kinder={
            <>
              <Wertzeile label="Modell" wert={einstellungen.fahrzeugtitel || "—"} />
              <Wertzeile label="Ausführung" wert={einstellungen.ausfuehrung || fahrzeug.details || "—"} />
              <Wertzeile label="Fahrgestellnummer" wert={fahrzeug.fin || "—"} />
              <Wertzeile label="Kennzeichen" wert={einstellungen.kennzeichen || "—"} />
              <Wertzeile
                label="Erstzulassung"
                wert={fahrzeug.erstzulassung ? datum(fahrzeug.erstzulassung) : "—"}
              />
              <Wertzeile
                label="Hauptuntersuchung fällig"
                wert={fahrzeug.hu ? datum(fahrzeug.hu) : "—"}
              />
              <Wertzeile
                label="Kilometerstand"
                wert={fahrzeug.odoBekannt ? `${de(fahrzeug.odo)} km` : "—"}
              />
            </>
          }
        />
      </Tile>

      {technik.length > 0 && (
        <Tile>
          <span className="ads-eyebrow">Technische Daten</span>
          {technik.map((gruppe, i) => (
            <Accordion key={gruppe.gruppe ?? i} title={gruppe.gruppe ?? "Weitere Angaben"}>
              <Werteliste
                kinder={(gruppe.posten ?? []).map(([bezeichnung, wert]) => (
                  <Wertzeile key={bezeichnung} label={bezeichnung} wert={wert} />
                ))}
              />
            </Accordion>
          ))}
        </Tile>
      )}

      {ausstattung.length > 0 && (
        <Tile>
          <span className="ads-eyebrow">Ausstattung</span>
          {ausstattung.map((gruppe, i) => (
            <Accordion
              key={gruppe.gruppe ?? i}
              title={gruppe.gruppe ?? "Weitere Ausstattung"}
              summary={`${(gruppe.sonder?.length ?? 0) + (gruppe.serie?.length ?? 0)}`}
            >
              <ul className="dm-liste">
                {(gruppe.sonder ?? []).map((posten) => (
                  <li key={posten}>{posten}</li>
                ))}
                {(gruppe.serie ?? []).map((posten) => (
                  <li key={posten} className="dm-liste__serie">
                    {posten}
                  </li>
                ))}
              </ul>
            </Accordion>
          ))}
        </Tile>
      )}
    </>
  )
}
