/**
 * Die Felder einer Fahrt jenseits von Zeitpunkt und Dauer - geteilt zwischen
 * dem Neuanlegen (Fahrten.tsx) und dem Bearbeiten (FahrtDetail.tsx), damit
 * beide Formulare nicht auseinanderlaufen. Vorlage: `fahrtFelder()` im
 * Panel (audi-dashboard-app.js).
 */

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

import type { FahrtFelder as FahrtFelderApi } from "../api"

export interface FahrtFelderEingabe {
  art: "privat" | "arbeitsweg"
  startOrt: string
  zielOrt: string
  odoStart: string
  odoEnde: string
  distanz: string
}

export const LEERE_FAHRT_FELDER: FahrtFelderEingabe = {
  art: "privat",
  startOrt: "",
  zielOrt: "",
  odoStart: "",
  odoEnde: "",
  distanz: "",
}

/** Vorbelegung aus einer bestehenden Fahrt fürs Bearbeiten-Formular. */
export function fahrtFelderAusFahrt(fahrt: {
  art: "privat" | "arbeitsweg"
  start_address?: string | null
  end_address?: string | null
  odo_start?: number | null
  odo_end?: number | null
  distance_km?: number | null
}): FahrtFelderEingabe {
  return {
    art: fahrt.art,
    startOrt: fahrt.start_address ?? "",
    zielOrt: fahrt.end_address ?? "",
    odoStart: fahrt.odo_start != null ? String(fahrt.odo_start) : "",
    odoEnde: fahrt.odo_end != null ? String(fahrt.odo_end) : "",
    distanz: fahrt.distance_km != null ? String(fahrt.distance_km) : "",
  }
}

/** Wandelt die Formulareingabe in die Felder um, die das Backend erwartet -
    leere Felder werden als "nicht angegeben" (undefined) übertragen, nicht
    als 0, sonst würde ein leeres Kilometerfeld einen echten Wert überschreiben. */
export function fahrtFelderAuswerten(
  eingabe: FahrtFelderEingabe,
): Pick<FahrtFelderApi, "art" | "start_ort" | "ziel_ort" | "odo_start" | "odo_end" | "distanz"> {
  const zahl = (wert: string): number | null => {
    if (wert.trim() === "") return null
    const n = Number(wert.replace(",", "."))
    return Number.isFinite(n) ? n : null
  }
  return {
    art: eingabe.art,
    start_ort: eingabe.startOrt.trim() || null,
    ziel_ort: eingabe.zielOrt.trim() || null,
    odo_start: zahl(eingabe.odoStart),
    odo_end: zahl(eingabe.odoEnde),
    distanz: zahl(eingabe.distanz),
  }
}

export function FahrtFelderFormular({
  werte,
  setzeWerte,
}: {
  werte: FahrtFelderEingabe
  setzeWerte: (aendern: (alt: FahrtFelderEingabe) => FahrtFelderEingabe) => void
}) {
  const feld = <K extends keyof FahrtFelderEingabe>(schluessel: K) => ({
    value: werte[schluessel],
    onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
      setzeWerte((alt) => ({ ...alt, [schluessel]: e.target.value })),
  })

  return (
    <>
      <Feld label="Art">
        <select
          className="dm-auswahl"
          value={werte.art}
          onChange={(e) =>
            setzeWerte((alt) => ({ ...alt, art: e.target.value as "privat" | "arbeitsweg" }))
          }
        >
          <option value="privat">Privat</option>
          <option value="arbeitsweg">Arbeitsweg</option>
        </select>
      </Feld>
      <Feld label="Startort">
        <input className="dm-eingabe" placeholder="unbekannt" {...feld("startOrt")} />
      </Feld>
      <Feld label="Zielort">
        <input className="dm-eingabe" placeholder="unbekannt" {...feld("zielOrt")} />
      </Feld>
      <Feld label="Startkilometer" unit="km">
        <input className="dm-eingabe" inputMode="numeric" placeholder="wird ergänzt" {...feld("odoStart")} />
      </Feld>
      <Feld label="Endkilometer" unit="km">
        <input className="dm-eingabe" inputMode="numeric" placeholder="wird ergänzt" {...feld("odoEnde")} />
      </Feld>
      <Feld label="Gefahrene Distanz" unit="km" last>
        <input className="dm-eingabe" inputMode="decimal" placeholder="aus km-Stand" {...feld("distanz")} />
      </Feld>
    </>
  )
}
