export interface VorlesetasteProps {
  readonly laeuft: boolean;
  /** Eine Ausgabe ist angehalten und lässt sich fortsetzen. */
  readonly angehalten?: boolean;
  /** Was vorgelesen würde – „Frage“ oder „Antwort“. */
  readonly gegenstand: string;
  readonly onSprich: () => void;
  readonly onAbbrechen: () => void;
  readonly onAnhalten?: () => void;
  readonly onFortsetzen?: () => void;
}

/**
 * Ein Knopf, der vorliest und die Vorlesung wieder anhält – und daneben,
 * solange etwas läuft, ein zweiter zum Anhalten.
 *
 * **Warum der erste Knopf allein bleibt.** Zwei Knöpfe – einer für die Frage,
 * einer für die Antwort – wären an derselben Stelle zwei verschiedene Dinge,
 * je nachdem, wie weit die Frage bearbeitet ist. Ein Knopf, der immer den
 * gerade sichtbaren Inhalt liest, bleibt in Position und Bedeutung gleich
 * (WCAG 3.2.4) und ist per Tastatur immer an derselben Stelle zu finden.
 *
 * **Warum kein `aria-pressed`.** Der Knopf schaltet nichts um, er startet
 * und hält an; Beschriftung und Symbol sagen beides ausdrücklich. Ein
 * gedrückter Umschalter würde suggerieren, die Sprachausgabe bliebe an.
 *
 * Der Halt-Knopf ist keine Zutat, sondern Pflicht: Was länger als drei
 * Sekunden tönt, muss sich anhalten lassen (WCAG 1.4.2).
 *
 * **Warum seit 0.22.0 ein Anhalten daneben steht.** „Beenden“ verwarf die
 * Ausgabe: Wer bei einer über eine Minute langen Erklärung kurz gestört
 * wurde, musste von vorn beginnen. Der zweite Knopf merkt sich die Stelle.
 * Er erscheint nur, wenn der Aufrufer beides mitgibt – die Prüfungsansicht
 * kommt ohne aus.
 */
export function Vorlesetaste({
  laeuft,
  angehalten = false,
  gegenstand,
  onSprich,
  onAbbrechen,
  onAnhalten,
  onFortsetzen,
}: VorlesetasteProps): React.JSX.Element {
  const mitPause = onAnhalten !== undefined && onFortsetzen !== undefined;

  return (
    <>
      <button
        type="button"
        className="knopf knopf--leise"
        onClick={laeuft ? onAbbrechen : onSprich}
      >
        <span aria-hidden="true">{laeuft ? '■' : '▶'}</span>{' '}
        {laeuft ? 'Vorlesen beenden' : `${gegenstand} vorlesen`}
      </button>

      {mitPause && (laeuft || angehalten) ? (
        <button
          type="button"
          className="knopf knopf--leise"
          onClick={angehalten ? onFortsetzen : onAnhalten}
        >
          <span aria-hidden="true">{angehalten ? '▶' : '❚❚'}</span>{' '}
          {angehalten ? 'Weiterlesen' : 'Vorlesen anhalten'}
        </button>
      ) : null}
    </>
  );
}
