import { Fragment, useId } from 'react';

import { TASTENKUERZEL } from '../../../../shared/hilfe';
import { Hinweis } from './Hinweis';

export interface KuerzelHilfeProps {
  readonly aktiv: boolean;
  readonly onAktiv: (aktiv: boolean) => void;
  /** Kürzel sind wegen eines erkannten Hilfsmittels voreingestellt aus. */
  readonly wegenHilfsmittelAus?: boolean;
  /**
   * Meldung, wenn die Wahl nicht dauerhaft gesichert werden konnte.
   *
   * Seit die Einstellung in `einstellungen.json` liegt, kann das Sichern
   * scheitern – voller Datenträger, schreibgeschütztes Verzeichnis. Der
   * Schalter springt trotzdem um; dass er die Sitzung nicht überlebt, muss
   * dann gesagt werden statt verschwiegen.
   */
  readonly meldung?: string | null;
}

/**
 * Übersicht der Tastenkürzel samt Ausschalter.
 *
 * WCAG 2.1.4 verlangt, dass Kürzel aus einzelnen Zeichen abschaltbar sind –
 * sonst lösen sie bei Spracheingabe oder unabsichtlichen Anschlägen aus.
 *
 * Läuft ein Screenreader, sind sie von vornherein aus: Im Lesemodus von NVDA
 * und JAWS sind die Ziffern für die Navigation nach Überschriftenebenen
 * belegt. Warum das so ist, steht dann ausdrücklich dabei – eine stille
 * Voreinstellung, die niemand erklärt, ist selbst eine Barriere.
 */
export function KuerzelHilfe({
  aktiv,
  onAktiv,
  wegenHilfsmittelAus = false,
  meldung = null,
}: KuerzelHilfeProps): React.JSX.Element {
  const schalterId = useId();
  const listeId = useId();

  return (
    <div className="kuerzel">
      <div className="kuerzel__schalter">
        <input
          className="kuerzel__feld"
          id={schalterId}
          type="checkbox"
          checked={aktiv}
          aria-describedby={listeId}
          onChange={(ereignis) => {
            onAktiv(ereignis.target.checked);
          }}
        />
        <label className="kuerzel__beschriftung" htmlFor={schalterId}>
          Tastenkürzel in der Lernsitzung verwenden
        </label>
      </div>

      {meldung === null ? null : (
        <Hinweis art="fehler" alsMeldung>
          {meldung}
        </Hinweis>
      )}

      {wegenHilfsmittelAus ? (
        <Hinweis art="hinweis">
          Es läuft ein Hilfsmittel wie ein Screenreader. Die Tastenkürzel sind deshalb
          ausgeschaltet: Ihre Ziffern sind im Lesemodus von NVDA und JAWS bereits für die Navigation
          nach Überschriften belegt. Sie können sie oben trotzdem einschalten.
        </Hinweis>
      ) : null}

      {/* Die Liste steht nicht hier, sondern in `shared/hilfe.ts` – dieselbe
          Quelle, aus der das Handbuch sie nimmt. Vorher stand sie nur an
          dieser Stelle als JSX; ein viertes Kürzel hätte hier gestanden und
          im Handbuch gefehlt, ohne dass etwas rot geworden wäre. */}
      <dl className="kuerzel__liste" id={listeId}>
        {TASTENKUERZEL.map((zeile) => (
          <Fragment key={zeile.wirkung}>
            <dt>
              {zeile.tasten.map((taste, stelle) => (
                <Fragment key={taste}>
                  {stelle > 0 ? <span> {zeile.verbindung === 'bis' ? 'bis' : '+'} </span> : null}
                  <kbd>{taste}</kbd>
                </Fragment>
              ))}
            </dt>
            <dd>{zeile.wirkung}</dd>
          </Fragment>
        ))}
      </dl>

      <p className="kuerzel__fussnote">
        Die Kürzel wirken nur außerhalb von Textfeldern. Ohne Kürzel bleibt alles über{' '}
        <kbd>Tab</kbd>, die <kbd>Pfeiltasten</kbd> und die <kbd>Leertaste</kbd> bedienbar.
      </p>
    </div>
  );
}
