import type { Glossareintrag } from '../../../../shared/glossar';
import { Begriffserklaerung } from './Begriffserklaerung';

export interface BegriffeZurFrageProps {
  readonly eintraege: readonly Glossareintrag[];
  /**
   * `true`, sobald die Frage beantwortet ist.
   *
   * Vorher steht ein Hinweis über der Liste: Bei einer Definitionsfrage ist
   * die Bestimmung des Begriffs zugleich die Antwort.
   */
  readonly beantwortet: boolean;
}

/**
 * Die Fachbegriffe, die in dieser Frage vorkommen.
 *
 * WCAG 3.1.3 verlangt einen Weg zur Bedeutung ungewöhnlicher Wörter, und der
 * Prüfplan dieses Projekts verlangt ihn ausdrücklich **aus der Frage heraus**.
 * Wer ein Wort nicht kennt, braucht es beim Lesen der Frage – nicht erst
 * danach.
 *
 * Zugleich ist bei einer Definitionsfrage („Was ist eine Kurzwaffe?") die
 * Begriffsbestimmung die Antwort. Deshalb ist die Liste zugeklappt und sagt
 * vor dem Beantworten dazu, worauf man sich einlässt. Beides zusammen: Wer
 * die Hilfe braucht, bekommt sie; wer sich die Frage nicht verderben will,
 * stolpert nicht hinein.
 *
 * In der Prüfungssimulation erscheint dieser Bereich nicht – dort gibt es
 * keine Hilfsmittel, weil es sie in der Prüfung auch nicht gibt.
 */
export function BegriffeZurFrage({
  eintraege,
  beantwortet,
}: BegriffeZurFrageProps): React.JSX.Element | null {
  if (eintraege.length === 0) {
    return null;
  }

  const anzahl = eintraege.length;
  const beschriftung =
    anzahl === 1
      ? 'Ein Fachbegriff in dieser Frage'
      : `${String(anzahl)} Fachbegriffe in dieser Frage`;

  return (
    <details className="begriffe">
      <summary className="begriffe__schalter">
        {beschriftung}
        <span className="nur-screenreader"> – {eintraege.map((e) => e.begriff).join(', ')}</span>
      </summary>

      <div className="begriffe__inhalt">
        {beantwortet ? null : (
          <p className="begriffe__warnung">
            Achtung: Fragt die Aufgabe nach der Bedeutung eines dieser Begriffe, steht die Antwort
            hier bereits.
          </p>
        )}

        {/* Kein eigener Zwischentitel: Die Zusammenfassung des
            Aufklappbereichs benennt ihn bereits, und ein zweiter Text mit
            demselben Wortlaut wäre für Bildschirmleser eine Wiederholung. */}
        {eintraege.map((eintrag) => (
          <Begriffserklaerung key={eintrag.begriff} eintrag={eintrag} ebene={2} />
        ))}
      </div>
    </details>
  );
}
