import { useId } from 'react';

export interface FreitextAntwortProps {
  readonly text: string;
  readonly gesperrt: boolean;
  readonly onText: (text: string) => void;
}

/**
 * Eingabefeld für offene Fragen.
 *
 * Erst ausformulieren, dann vergleichen: Das Feld bleibt nach dem Einblenden
 * der Musterantwort sichtbar, damit sich die eigene Antwort Wort für Wort
 * gegenprüfen lässt.
 *
 * Gesperrt wird mit `readOnly`, nicht mit `disabled`. Ein `disabled`
 * Textfeld nimmt keinen Fokus – der eigene Antworttext war damit ab dem
 * Einblenden der Musterantwort per Tastatur nicht mehr erreichbar, und ein
 * Screenreader konnte ihn nicht mehr durchgehen. Das traf ausgerechnet den
 * Schritt, für den das Feld überhaupt stehenbleibt. `readOnly` verhindert
 * das Ändern genauso, lässt Fokus und Textnavigation aber zu (WCAG 2.1.1,
 * 2.4.3). Bis Fassung 0.17.0 war dies die einzige Stelle im Lernpfad, die
 * von der Projektregel „aria-disabled statt disabled“ abwich.
 */
export function FreitextAntwort({
  text,
  gesperrt,
  onText,
}: FreitextAntwortProps): React.JSX.Element {
  const feldId = useId();
  const hinweisId = useId();

  return (
    <div className="freitext">
      <label className="freitext__beschriftung" htmlFor={feldId}>
        Ihre Antwort
      </label>
      <p className="freitext__hinweis" id={hinweisId}>
        Formulieren Sie die Antwort in eigenen Worten. Anschließend zeigen Sie die Musterantwort an
        und bewerten sich selbst. Das Feld darf auch leer bleiben.
      </p>
      <textarea
        className="freitext__feld"
        id={feldId}
        aria-describedby={hinweisId}
        rows={6}
        value={text}
        readOnly={gesperrt}
        aria-readonly={gesperrt}
        onChange={(ereignis) => {
          onText(ereignis.target.value);
        }}
      />
    </div>
  );
}
