import { useId } from 'react';

import {
  TEXTABSTAENDE,
  TEXTABSTAND_BEZEICHNUNG,
  TEXTABSTAND_ERKLAERUNG,
  textabstandAnsage,
  textabstandBereinigen,
  type Textabstand,
} from '../../../shared/textabstand';

export interface TextabstandswahlProps {
  /** Zuletzt gespeicherte Stufe; `undefined`, solange nichts gelesen wurde. */
  readonly gespeichert: string | undefined;
  readonly onWaehlen: (stufe: Textabstand) => void;
}

/**
 * Zeilen-, Wort- und Zeichenabstand in drei Stufen.
 *
 * **Warum es das überhaupt braucht.** WCAG 1.4.12 verlangt, dass Text sich
 * mit weiteren Abständen darstellen lässt. Im Browser erfüllt man das, indem
 * man nutzereigene Stilblätter toleriert. In einer ausgelieferten
 * Electron-Anwendung gibt es die nicht – weder Erweiterungen noch
 * Entwicklerwerkzeuge –, der Einzige, der die Abstände ändern kann, ist die
 * Anwendung selbst. Formal ist das kein Verstoß (das Kriterium misst in einer
 * geschlossenen Umgebung die Toleranz gegenüber Overrides, die es hier nicht
 * geben kann); praktisch ist es eine Lücke bei genau denen, für die das
 * Kriterium geschrieben wurde.
 *
 * **Warum getrennt von der Anzeigegröße.** Der Zoom skaliert alles gemeinsam
 * – Schrift, Bilder, Abstände. Er hilft bei zu kleiner Schrift. Wer mit
 * Legasthenie liest, braucht oft nicht größere Buchstaben, sondern mehr Luft
 * zwischen ihnen; das ist eine andere Einstellung mit einem anderen Zweck.
 *
 * **Warum das Attribut nicht hier gesetzt wird.** Die Stufe wirkt über
 * `data-textabstand` am Wurzelelement (siehe `tokens.css`), und das kann nur
 * der Renderer – anders als beim Zoom, der am Fenster hängt und deshalb im
 * Hauptprozess sitzt. Bis Fassung 0.24.1 stand das Setzen in einem Effekt
 * **dieser** Komponente; sie steht aber in der Einstellungskarte des
 * Startbildschirms und existiert nur, solange der gezeigt wird. Profilfrage
 * und Zuschnittfrage kommen davor und lagen deshalb immer in der
 * Werksdarstellung. Zuständig ist seither `useTextabstand`, aufgerufen in
 * `App.tsx`; hier steht nur noch die Bedienung.
 */
export function Textabstandswahl({
  gespeichert,
  onWaehlen,
}: TextabstandswahlProps): React.JSX.Element {
  const standId = useId();
  const stufe = textabstandBereinigen(gespeichert);

  return (
    <div className="textabstand">
      {/* Der sichtbare Stand IST die Ansage – dieselbe Überlegung wie bei
          der Anzeigegröße: Zwei Stellen für dieselbe Aussage laufen
          auseinander, und eine unsichtbare zweite Region fiele niemandem auf,
          wenn sie schwiege. */}
      <p id={standId} className="textabstand__stand" role="status" aria-live="polite">
        {textabstandAnsage(stufe)}
      </p>

      <div className="textabstand__knoepfe">
        {TEXTABSTAENDE.map((wahl) => (
          <button
            key={wahl}
            type="button"
            className="knopf"
            aria-pressed={wahl === stufe}
            aria-describedby={standId}
            onClick={() => {
              onWaehlen(wahl);
            }}
          >
            {TEXTABSTAND_BEZEICHNUNG[wahl]}
          </button>
        ))}
      </div>

      <p className="textabstand__hinweis">{TEXTABSTAND_ERKLAERUNG[stufe]}</p>
    </div>
  );
}
