import {
  fragetypBezeichnung,
  type Frage,
  type KatalogBild as KatalogBildDaten,
} from '../../../../shared/katalog';
import { Bilderleiste } from './Bilderleiste';
import { RichTextAnzeige } from './RichTextAnzeige';
import { Zeichenbedeutung } from './Zeichenbedeutung';

export interface FrageKopfProps {
  readonly frage: Frage;
  readonly kapitelTitel: string;
  readonly abschnittTitel: string | null;
  /** Einstiegspunkt für den Fokus – wandert bei jedem Fragewechsel hierher. */
  readonly titelRef: React.RefObject<HTMLHeadingElement | null>;
  readonly bildDaten: (bildId: string) => KatalogBildDaten | undefined;
  /**
   * `true`, sobald die Frage beantwortet ist – erst dann erscheint unter den
   * Zeichen die erklärende Bedeutung ({@link Zeichenbedeutung}). Der
   * Prüfungslauf lässt die Eigenschaft weg und bleibt damit erklärungsfrei.
   */
  readonly beantwortet?: boolean;
  /**
   * Überschriftenebene des Fragetextes.
   *
   * Im Lernmodus ist die Frage die oberste Überschrift der Ansicht (1) – die
   * Ansicht *ist* die Frage. In der Prüfung steht darüber der Titel des Laufs,
   * dort also 2. Die Hierarchie bleibt in beiden Fällen sprungfrei.
   */
  readonly ebene?: 1 | 2;
  /**
   * Zusatz, der nur vorgelesen wird – etwa „Frage 4 von 80“.
   *
   * Beim Blättern wandert der Fokus auf diese Überschrift. Angesagt würde
   * sonst nur der Fragewortlaut, der nichts darüber sagt, wie weit man im
   * Bogen ist. Der Zusatz steht **hinter** dem sichtbaren Text, damit dieser
   * im zugänglichen Namen enthalten bleibt (WCAG 2.5.3 Beschriftung im
   * Namen).
   */
  readonly vorlesezusatz?: string;
}

/**
 * Kopf einer Frage: Einordnung als leise Zeile, darunter der Wortlaut.
 *
 * **Warum der Fragetext die Überschrift ist.** Vorher stand die amtliche
 * Nummer als Überschrift und der Wortlaut als Absatz darunter – zusammen mit
 * Kapitel, Abschnitt und Fragetyp waren das drei Zeilen Vorspann, bevor
 * überhaupt zu lesen war, worum es geht. Gemessen: 112 Pixel, und der Blick
 * landete zuerst auf einer Nummer.
 *
 * Jetzt ist der Wortlaut die Überschrift. Das ist nicht nur kürzer, es ist
 * auch richtig: Wer per Überschrift navigiert, springt damit zur Frage statt
 * zu ihrer Nummer. Die Nummer bleibt sichtbar – ohne sie ließe sich keine
 * Frage in der amtlichen Vorlage nachschlagen –, aber sie steht dort, wo
 * Einordnungen hingehören: klein, über der Sache.
 */
export function FrageKopf({
  frage,
  kapitelTitel,
  abschnittTitel,
  titelRef,
  bildDaten,
  beantwortet = false,
  ebene = 1,
  vorlesezusatz,
}: FrageKopfProps): React.JSX.Element {
  const inhalt = (
    <>
      <RichTextAnzeige text={frage.frage} art="hervorhebung" />
      {/* Komma statt Gedankenstrich: Bei der Berechnung des zugänglichen
          Namens fällt der führende Leerraum eines Elements weg. */}
      <span className="nur-screenreader">
        , Frage {frage.amtliche_nummer}
        {vorlesezusatz === undefined ? '' : `, ${vorlesezusatz}`}
      </span>
    </>
  );

  return (
    <div className="frage__kopf">
      <p className="frage__einordnung">
        <span className="frage__nummer">Frage {frage.amtliche_nummer}</span>
        <span>
          Kapitel {frage.kapitel} – {kapitelTitel}
        </span>
        {abschnittTitel !== null && frage.abschnitt !== null ? (
          <span>
            Abschnitt {frage.abschnitt} – {abschnittTitel}
          </span>
        ) : null}
        <span>{fragetypBezeichnung(frage.typ)}</span>
      </p>

      {/* tabIndex={-1}: nur programmatisch fokussierbar, nicht per Tab. */}
      {ebene === 1 ? (
        <h1 className="frage__text" ref={titelRef} tabIndex={-1}>
          {inhalt}
        </h1>
      ) : (
        <h2 className="frage__text" ref={titelRef} tabIndex={-1}>
          {inhalt}
        </h2>
      )}

      {frage.bilder.length > 0 ? (
        <div className="frage__bilder">
          <Bilderleiste bildIds={frage.bilder} bildDaten={bildDaten} />
          {/* Außerhalb der Bilderleiste: Die ist ein `<span>`, und ein
              `<details>` darf dort nicht hinein. */}
          {beantwortet ? <Zeichenbedeutung bildIds={frage.bilder} bildDaten={bildDaten} /> : null}
        </div>
      ) : null}
    </div>
  );
}
