import { useId } from 'react';

import { useFokusBeimAufbau } from '../../hooks/useFokusBeimAufbau';

/** Woraufhin die Rückfrage erscheint – bestimmt Titel und Reihenfolge. */
export type Abgabeanlass = 'abgeben' | 'abbrechen';

export interface AbgabebestaetigungProps {
  readonly anlass: Abgabeanlass;
  readonly gesamt: number;
  readonly beantwortet: number;
  readonly offen: number;
  readonly onAbgeben: () => void;
  readonly onWeiterbearbeiten: () => void;
  readonly onVerwerfen: () => void;
}

/**
 * Rückfrage vor dem Beenden einer Simulation.
 *
 * Kein modaler Dialog: Der Bereich steht im Textfluss, übernimmt beim
 * Erscheinen den Fokus und fängt ihn nicht ein – von hier führt jeder Weg
 * weiter (WCAG 2.1.2). Wie viele Fragen noch offen sind, steht ausdrücklich
 * dabei.
 *
 * Beide Anlässe zeigen dieselben drei Wege, nur in anderer Reihenfolge und
 * mit passendem Titel: Wer abgeben will, soll das Auswerten zuerst finden;
 * wer abbrechen will, das Verwerfen. Eine eigene Ansicht für den Abbruch
 * wäre doppelte Pflege ohne Gewinn.
 */
export function Abgabebestaetigung({
  anlass,
  gesamt,
  beantwortet,
  offen,
  onAbgeben,
  onWeiterbearbeiten,
  onVerwerfen,
}: AbgabebestaetigungProps): React.JSX.Element {
  const bereichRef = useFokusBeimAufbau<HTMLDivElement>();
  const titelId = useId();

  return (
    <div
      className="abgabe"
      ref={bereichRef}
      tabIndex={-1}
      role="group"
      aria-labelledby={titelId}
      aria-describedby={`${titelId}-text`}
    >
      <h3 className="abgabe__titel" id={titelId}>
        {anlass === 'abgeben' ? 'Simulation wirklich abgeben?' : 'Simulation wirklich abbrechen?'}
      </h3>
      <p id={`${titelId}-text`}>
        Sie haben {beantwortet} von {gesamt} Fragen beantwortet.{' '}
        {offen === 0
          ? 'Es ist keine Frage mehr offen.'
          : offen === 1
            ? 'Eine Frage ist noch offen; sie zählt als nicht beantwortet.'
            : `${String(offen)} Fragen sind noch offen; sie zählen als nicht beantwortet.`}
      </p>

      <div className="abgabe__aktionen">
        {anlass === 'abgeben' ? (
          <>
            <button type="button" className="knopf knopf--haupt" onClick={onAbgeben}>
              Jetzt abgeben und auswerten
            </button>
            <button type="button" className="knopf" onClick={onWeiterbearbeiten}>
              Weiter bearbeiten
            </button>
            <button type="button" className="knopf knopf--leise" onClick={onVerwerfen}>
              Ohne Auswertung verwerfen
            </button>
          </>
        ) : (
          <>
            <button type="button" className="knopf knopf--haupt" onClick={onVerwerfen}>
              Abbrechen und verwerfen
            </button>
            <button type="button" className="knopf" onClick={onWeiterbearbeiten}>
              Weiter bearbeiten
            </button>
            <button type="button" className="knopf knopf--leise" onClick={onAbgeben}>
              Doch abgeben und auswerten
            </button>
          </>
        )}
      </div>
    </div>
  );
}
