import type { KatalogBild as KatalogBildDaten } from '../../../../shared/katalog';

export interface ZeichenbedeutungProps {
  readonly bildIds: readonly string[];
  readonly bildDaten: (bildId: string) => KatalogBildDaten | undefined;
}

/**
 * Was ein amtliches Zeichen bedeutet – die zweite Stufe des
 * Bildbeschreibungskonzepts aus dem Prüfplan (Szenario S4).
 *
 * Der Alternativtext eines Zeichens bleibt bewusst neutral: Bei den Fragen,
 * in denen das Zeichen selbst die Antwortoption ist, verriete jede Deutung
 * die Lösung. Die Bedeutung steht deshalb hier, und die aufrufende Stelle
 * rendert diesen Baustein erst, wenn die Frage beantwortet ist – im
 * Prüfungslauf gar nicht, dort gibt es auch für Sehende keine Erklärungen.
 * Sehende lesen die Bedeutung nach der Antwort in der Erklärung mit; dieser
 * Baustein reicht sie am Bild nach, damit Screenreader-Nutzer denselben
 * Kontext bekommen.
 *
 * `<details>` wie bei den übrigen Aufklappern des Projekts: Tastatur und
 * Auf-/Zuklappzustand kommen von Haus aus mit.
 */
export function Zeichenbedeutung({
  bildIds,
  bildDaten,
}: ZeichenbedeutungProps): React.JSX.Element | null {
  /* Über `Set`: Zwei Bitmap-Fassungen desselben Zeichens tragen denselben
     Text, der dann nur einmal erscheinen soll. */
  const beschreibungen = [
    ...new Set(
      bildIds
        .map((bildId) => bildDaten(bildId)?.beschreibung ?? '')
        .filter((text) => text.trim().length > 0),
    ),
  ];

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

  return (
    <details className="zeichenbedeutung">
      <summary className="zeichenbedeutung__schalter">
        {beschreibungen.length === 1 ? 'Was dieses Zeichen bedeutet' : 'Was diese Zeichen bedeuten'}
      </summary>
      <div className="zeichenbedeutung__inhalt">
        {beschreibungen.map((text) => (
          <p key={text}>{text}</p>
        ))}
      </div>
    </details>
  );
}
