import type { Kapitel } from '../../../../shared/katalog';
import { gruppenZuKapitel } from '../../../../shared/themen';
import { useThemen } from '../../hooks/useThemen';

export interface KapitelWahlProps {
  readonly kapitel: readonly Kapitel[];
  readonly einstiegRef: React.RefObject<HTMLHeadingElement | null>;
  /** Kapitel, die dieses Profil dauerhaft nicht lernt. */
  readonly abgewaehlt?: readonly string[];
  readonly onKapitel: (kapitelId: string, titel: string) => void;
  readonly onAbschnitt: (abschnittId: string, titel: string) => void;
  /**
   * Ein Thema aus der redaktionellen Feingliederung.
   *
   * Als feste Fragenliste und nicht als Bereichsfilter: Diese Gruppen kennt
   * der Anwendungskern nicht – sie sind eine Ergänzung dieser Software und
   * stehen in `content/themen.json`, nicht im amtlichen Katalog.
   */
  readonly onThema: (frageIds: readonly string[], titel: string) => void;
  readonly onZurueck: () => void;
}

/**
 * Auswahl eines Kapitels oder Abschnitts.
 *
 * Jede Schaltfläche trägt ihren vollständigen Namen – auch vorgelesen bleibt
 * so eindeutig, was geübt wird.
 */
export function KapitelWahl({
  kapitel,
  abgewaehlt = [],
  einstiegRef,
  onKapitel,
  onAbschnitt,
  onThema,
  onZurueck,
}: KapitelWahlProps): React.JSX.Element {
  const { themen } = useThemen();

  return (
    <section className="kapitelwahl abschnitt" aria-labelledby="kapitelwahl-titel">
      <h1 id="kapitelwahl-titel" ref={einstiegRef} tabIndex={-1}>
        Kapitel wählen
      </h1>
      <p>
        Wählen Sie ein ganzes Kapitel, einen einzelnen Abschnitt oder ein Thema. Die Sitzung umfasst
        bis zu 20 Fragen.
      </p>

      <ul className="kapitelwahl__liste">
        {kapitel.map((eintrag) => (
          <li key={eintrag.id} className="kapitelwahl__kapitel">
            <h2 className="kapitelwahl__titel">
              {eintrag.id} – {eintrag.titel}
            </h2>
            {/*
              Ein Vermerk statt Verschwinden oder Sperren. Verschwände das
              Kapitel, fände niemand den Weg zurück zu seinem Schalter; und
              gesperrte Bedienelemente nehmen keinen Fokus – ihre Erklärung
              würde nie vorgelesen. Diese Anwendung hat das an zwei anderen
              Stellen ausdrücklich so entschieden.
            */}
            {abgewaehlt.includes(eintrag.id) ? (
              <p className="kapitelwahl__abgewaehlt">
                Für dieses Profil abgewählt: Diese Fragen zählen nicht in Fortschritt und Pensum.
                Üben können Sie sie hier trotzdem; umstellen lässt es sich auf dem Startbildschirm
                unter „Ihr Lernplan“.
              </p>
            ) : null}
            <div className="kapitelwahl__knoepfe">
              <button
                type="button"
                className="knopf"
                onClick={() => {
                  onKapitel(eintrag.id, eintrag.titel);
                }}
              >
                Ganzes Kapitel {eintrag.id} üben
              </button>
              {eintrag.abschnitte.map((abschnitt) => (
                <button
                  key={abschnitt.id}
                  type="button"
                  className="knopf knopf--leise"
                  onClick={() => {
                    onAbschnitt(abschnitt.id, abschnitt.titel);
                  }}
                >
                  {abschnitt.id} – {abschnitt.titel}
                </button>
              ))}
              {/*
                Die Themen der Kapitel II bis IV. Der amtliche Katalog
                gliedert nur Kapitel I in Abschnitte; für 230 Fragen gab es
                bis 0.22.0 nur den Knopf „ganzes Kapitel“ – 92 Fragen für
                Kapitel II. Wer an Munitionskunde scheitert, konnte nichts
                Kleineres nachüben.

                Die Gruppen stehen deshalb neben den Abschnitten und nicht an
                ihrer Stelle: Wo es amtliche Abschnitte gibt, bleiben sie die
                Gliederung, und eine zweite daneben wäre eine Zahl, die
                auseinanderläuft.
              */}
              {gruppenZuKapitel(themen, eintrag.id).map((gruppe) => (
                <button
                  key={gruppe.id}
                  type="button"
                  className="knopf knopf--leise"
                  onClick={() => {
                    onThema(gruppe.fragen, gruppe.titel);
                  }}
                >
                  {gruppe.titel} ({gruppe.fragen.length})
                </button>
              ))}
            </div>
            {gruppenZuKapitel(themen, eintrag.id).length > 0 ? (
              <p className="kapitelwahl__themenherkunft">
                Die Themen sind eine Gliederung dieser Software. Der amtliche Fragenkatalog gliedert
                dieses Kapitel nicht weiter auf.
              </p>
            ) : null}
          </li>
        ))}
      </ul>

      <button type="button" className="knopf knopf--leise" onClick={onZurueck}>
        Zum Start
      </button>
    </section>
  );
}
