import {
  URTEIL_BEZEICHNUNG,
  ZEITMODUS_BEZEICHNUNG,
  type Pruefungsverlauf,
} from '../../../../shared/pruefung';
import { dauerText, zeitpunktText } from '../../pruefung/zeit';
import { Hinweis } from '../lernen/Hinweis';
import { URTEIL_SYMBOL } from './urteil';

export interface VerlaufslisteProps {
  readonly laedt: boolean;
  readonly eintraege: readonly Pruefungsverlauf[];
  readonly meldung: string | null;
}

/**
 * Frühere Simulationen.
 *
 * Als Tabelle mit Beschriftung: Zeitpunkt, Profil, Trefferquote und Urteil
 * gehören zusammen, und eine Tabelle lässt sich zellenweise vorlesen. Das
 * Urteil steht als Symbol und als Wort da, nie allein farbig (WCAG 1.4.1).
 */
export function Verlaufsliste({
  laedt,
  eintraege,
  meldung,
}: VerlaufslisteProps): React.JSX.Element {
  return (
    <div className="verlauf">
      <h3 className="verlauf__titel">Frühere Simulationen</h3>

      {laedt ? <p>Der Verlauf wird geladen …</p> : null}
      {meldung !== null ? <Hinweis art="hinweis">{meldung}</Hinweis> : null}

      {!laedt && meldung === null && eintraege.length === 0 ? (
        <p>Dies war Ihre erste gespeicherte Simulation. Weitere erscheinen hier zum Vergleich.</p>
      ) : null}

      {eintraege.length > 0 ? (
        <div className="verlauf__rahmen">
          <table className="verlauf__tabelle">
            <caption className="verlauf__beschriftung">
              Ihre bisherigen Simulationen, neueste zuerst
            </caption>
            <thead>
              <tr>
                <th scope="col">Zeitpunkt</th>
                <th scope="col">Profil</th>
                {/* Ohne diese Spalte stünden eine Simulation ohne Uhr und eine
                    unter Zeitdruck nebeneinander, als wären sie vergleichbar. */}
                <th scope="col">Zeitvorgabe</th>
                {/* Die Spalte stand bis 0.22.0 nicht in der Tabelle, obwohl
                    die Zahl seit jeher gespeichert wird. Zeitnot ist ein
                    eigenes Durchfallrisiko: Ob jemand von 118 auf 87 Minuten
                    heruntergekommen ist, sagt über die Prüfungsreife mehr aus
                    als manche Trefferquote. */}
                <th scope="col">Dauer</th>
                <th scope="col">Richtig</th>
                <th scope="col">Trefferquote</th>
                <th scope="col">Urteil</th>
              </tr>
            </thead>
            <tbody>
              {eintraege.map((eintrag) => (
                <tr key={eintrag.id}>
                  <td>{zeitpunktText(eintrag.zeitpunkt)}</td>
                  <td>{eintrag.profilName}</td>
                  <td>
                    {eintrag.zeitmodus === null
                      ? 'nicht vermerkt'
                      : ZEITMODUS_BEZEICHNUNG[eintrag.zeitmodus]}
                  </td>
                  <td>{dauerText(eintrag.dauerMs)}</td>
                  <td>
                    {eintrag.richtig} von {eintrag.gesamt}
                    {/* Ohne diesen Zusatz sähe ein abgelaufener Lauf wie ein
                        Wissenseinbruch aus: Unbeantwortete Fragen zählen in
                        der Quote wie falsch beantwortete. Läufe vor
                        Schema-Version 10 haben die Zahl nicht – dann steht
                        hier nichts, statt eine Null zu behaupten. */}
                    {eintrag.unbeantwortet !== null && eintrag.unbeantwortet > 0 ? (
                      <span className="verlauf__offen">
                        {' '}
                        ({eintrag.unbeantwortet} nicht bearbeitet
                        {eintrag.zeitAbgelaufen === true ? ', Zeit abgelaufen' : ''})
                      </span>
                    ) : null}
                  </td>
                  <td>{Math.round(eintrag.quote * 100)} Prozent</td>
                  <td className={`verlauf__urteil verlauf__urteil--${eintrag.urteil}`}>
                    <span aria-hidden="true">{URTEIL_SYMBOL[eintrag.urteil]}</span>{' '}
                    {URTEIL_BEZEICHNUNG[eintrag.urteil]}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : null}
    </div>
  );
}
