import type { LetzterFreitext } from '../../../../shared/lernstand';

export interface LetzteAntwortProps {
  readonly letzterFreitext: LetzterFreitext;
}

/** Deutsches Datum; unbrauchbare Zeitstempel werden nicht erfunden. */
function tag(iso: string): string | null {
  const wert = new Date(iso);
  return Number.isNaN(wert.getTime())
    ? null
    : wert.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
}

/**
 * Die eigene frühere Antwort auf dieselbe offene Frage.
 *
 * ## Warum das überhaupt erscheint
 *
 * Der Text lag seit jeher in `antwort_log.freitext` – geschrieben bei jeder
 * offenen Frage, aufbewahrt, und von keiner einzigen Abfrage gelesen. Die
 * Anwendung sammelte etwas, das sie nie zurückgab.
 *
 * Sein Wert liegt im Wiedersehen, nicht im Schreiben: Wer dieselbe Frage nach
 * zwei Wochen wiederbekommt, sieht hier, ob er heute genauer ist als damals –
 * und das ist etwas, das ein Blatt Papier nicht kann. Es ist dasselbe
 * Argument, mit dem gedruckte Lernkarten abgelehnt wurden: Die Wiedervorlage
 * bringt es zum richtigen Zeitpunkt.
 *
 * ## Warum erst nach dem Bestätigen
 *
 * Vorher wäre es eine Vorlage zum Abschreiben und machte aus dem
 * Ausformulieren ein Kopieren. Deshalb steht es zwischen der eigenen
 * Eingabe und der Musterantwort – genau dort, wo verglichen wird.
 *
 * ## Warum nur, wenn wirklich etwas dasteht
 *
 * Das Eingabefeld darf leer bleiben, und das steht auch so daneben. Ein
 * Kasten „Beim letzten Mal schrieben Sie" über einer leeren Zeile wäre eine
 * Vorhaltung ohne Inhalt; leere Einträge fallen deshalb schon im
 * Anwendungskern heraus.
 */
export function LetzteAntwort({ letzterFreitext }: LetzteAntwortProps): React.JSX.Element {
  const datum = tag(letzterFreitext.zeitpunkt);

  return (
    <div className="letzteantwort">
      <p className="letzteantwort__titel">
        {datum === null ? 'Beim letzten Mal schrieben Sie:' : `Am ${datum} schrieben Sie:`}
      </p>
      <p className="letzteantwort__text">{letzterFreitext.text}</p>
    </div>
  );
}
