import { useId } from 'react';

export interface SchalterProps {
  readonly beschriftung: string;
  readonly aktiv: boolean;
  readonly onAktiv: (aktiv: boolean) => void;
  /** Was die Einstellung bewirkt. Wird über `aria-describedby` verknüpft. */
  readonly erklaerung: React.ReactNode;
  /** Zusätzlicher Hinweis unterhalb, etwa zu einem erkannten Hilfsmittel. */
  readonly hinweis?: React.ReactNode;
  readonly deaktiviert?: boolean;
}

/**
 * Ein Ein-/Ausschalter mit Erklärung.
 *
 * Bewusst ein echtes `<input type="checkbox">` statt eines nachgebauten
 * Schalters: Es meldet seinen Zustand von sich aus, versteht die Leertaste,
 * erscheint im Formularmodus der Screenreader und erbt die Darstellung des
 * Systems im Modus für hohen Kontrast. Ein `role="switch"` auf einem
 * `<button>` müsste all das nachbilden – und mehrere Screenreader sprechen
 * es bis heute unterschiedlich aus.
 *
 * Die Erklärung hängt über `aria-describedby` am Feld, wird also mit
 * vorgelesen, ohne den Namen des Schalters zu verlängern.
 *
 * ## Warum `aria-disabled` und nicht `disabled`
 *
 * Der einzige Verwender von `deaktiviert` ist der Vorleseschalter auf einem
 * System ohne Sprachausgabe. Gerade dort steht unter dem Kästchen ein Satz,
 * der erklärt, **warum** es nicht zu haben ist – und ein natives `disabled`
 * nähme dem Kästchen den Fokus, sodass dieser Satz einem Bildschirmleser nie
 * begegnete (Projektregel, docs/stand.md 7.13; WCAG 2.1.1, 2.4.3). So bleibt
 * es erreichbar, meldet sich als nicht verfügbar, und der Umschalter kehrt
 * früh zurück. React setzt das Kästchen dabei selbst zurück, weil `checked`
 * am Zustand hängt und der hier unverändert bleibt.
 */
export function Schalter({
  beschriftung,
  aktiv,
  onAktiv,
  erklaerung,
  hinweis,
  deaktiviert = false,
}: SchalterProps): React.JSX.Element {
  const feldId = useId();
  const erklaerungId = useId();

  return (
    <div className="schalter">
      <div className="schalter__zeile">
        <input
          className="schalter__feld"
          id={feldId}
          type="checkbox"
          checked={aktiv}
          aria-disabled={deaktiviert}
          aria-describedby={erklaerungId}
          onChange={(ereignis) => {
            if (deaktiviert) {
              return;
            }
            onAktiv(ereignis.target.checked);
          }}
        />
        <label className="schalter__beschriftung" htmlFor={feldId}>
          {beschriftung}
        </label>
      </div>

      <p className="schalter__erklaerung" id={erklaerungId}>
        {erklaerung}
      </p>

      {hinweis}
    </div>
  );
}
