import { useId } from 'react';

import type { KatalogIndex } from '../../hooks/useKatalog';

export interface VerwandteFragenProps {
  readonly frageIds: readonly string[];
  readonly katalogIndex: KatalogIndex;
}

/**
 * Fragen, die denselben Gegenstand behandeln.
 *
 * ## Wozu
 *
 * Der amtliche Katalog kennt keine Frage-zu-Frage-Beziehung, obwohl die Bündel
 * auf der Hand liegen: II-34 fragt, was ein Schalldämpfer bewirkt, II-36 nach
 * der Umkehrung, II-33 nach der richtigen Aussage über Schalldämpfer. Wer eine
 * davon gerade verstanden hat, ist im besten Moment, die Nachbarn mitzunehmen –
 * bis 0.22.0 erfuhr er nie, dass es sie gibt.
 *
 * ## Warum hier keine Übungstaste steht
 *
 * Naheliegend wäre ein Knopf „diese Fragen üben“. Er wäre an dieser Stelle
 * schädlich: Eine Sitzung zu starten **ersetzt die laufende**, und zwar ohne
 * Rückfrage. Wer mitten in zwanzig Fragen steckt, verlöre seine Warteschlange
 * für einen Knopf, den er vielleicht nur neugierig gedrückt hat. Die
 * Übungstaste steht deshalb am Ende der Sitzung, wo nichts mehr läuft.
 *
 * Genannt werden amtliche Nummer und Fragetext – damit ist jede Frage in der
 * Suche zu finden, ohne dass die Sitzung dafür verlassen werden muss.
 *
 * ## Kennzeichnung
 *
 * Die Zuordnung ist eine Einschätzung dieser Software und nicht Teil des
 * amtlichen Katalogs. Das steht dabei, wie bei Erklärungen und Glossar.
 */
export function VerwandteFragen({
  frageIds,
  katalogIndex,
}: VerwandteFragenProps): React.JSX.Element | null {
  const titelId = useId();

  /* Fragen, die der Katalog nicht kennt, fallen still weg. Sie kämen nur
     durch eine Katalogfassung zustande, in der eine Frage verschwunden ist –
     dann ist eine Lücke in der Liste besser als eine leere Zeile. */
  const fragen = frageIds
    .map((frageId) => katalogIndex.frage(frageId))
    .filter((frage) => frage !== undefined);

  if (fragen.length === 0) {
    return null;
  }

  return (
    /* Zugeklappt: Die Liste darf „Nächste Frage“ nicht aus dem Bild drängen –
       dieselbe Überlegung wie bei der Erklärungstafel. Die Zahl im Schalter
       sagt, ob sich das Aufklappen lohnt. */
    <details className="verwandte">
      <summary className="verwandte__schalter">
        Verwandte Fragen ({fragen.length})
        <span className="nur-screenreader"> – Fragen zum selben Gegenstand</span>
      </summary>
      <p className="verwandte__titel" id={titelId}>
        Diese Fragen behandeln denselben Gegenstand:
      </p>
      <ul className="verwandte__liste" aria-labelledby={titelId}>
        {fragen.map((frage) => (
          <li key={frage.id}>
            <span className="verwandte__nummer">Frage {frage.amtliche_nummer}</span>{' '}
            {frage.frage.text}
          </li>
        ))}
      </ul>
      <p className="verwandte__herkunft">
        Die Zuordnung ist eine Ergänzung dieser Software und nicht Teil des amtlichen
        Fragenkatalogs.
      </p>
    </details>
  );
}
