import { useId, useState } from 'react';

import type { Kapitel } from '../../../../shared/katalog';
import { Fehlerprotokollausgabe, Fragenlistenausgabe } from './Fragendruckausgabe';
import { Lernberichtausgabe } from './Lernberichtausgabe';

/** Welches der drei Dokumente gerade eingestellt ist. */
type Dokument = 'bericht' | 'fehlerprotokoll' | 'fragenliste';

export interface DruckkarteProps {
  readonly profilId: number | null;
  /** Wie viele Fragen zuletzt falsch beantwortet wurden; `null` ohne Lernstand. */
  readonly fehleranzahl: number | null;
  /** Kapitel des Katalogs – `null`, solange er nicht geladen ist. */
  readonly kapitel: readonly Kapitel[] | null;
  /** Fragenzahl je Bereichskennung, für die Umfangsansage der Fragenliste. */
  readonly fragenJeBereich: ReadonlyMap<string, number>;
  readonly fragenGesamt: number;
}

/**
 * Alles, was auf Papier soll – in einer Karte.
 *
 * **Warum eine Karte statt dreier.** Lernbericht, Fehlerprotokoll und
 * Fragenliste standen bis Fassung 0.20.0 als drei gleichrangige Karten
 * untereinander auf dem Startbildschirm. Jede brachte ihre eigene Radiogruppe
 * „Schriftgröße des Dokuments“ mit; dreimal dieselbe Frage, dreimal zu
 * beantworten. Nachgemessen im damaligen Bildschirmfoto
 * (`docs/bildschirmfotos/01-startbildschirm-hell.png` zum Stand 0.19.x,
 * 1265 × 9032 px) nahmen die drei Karten zusammen rund 1740 Pixel ein – ein
 * Fünftel der Seite für drei Dokumente, von denen man eines zur Zeit erzeugt.
 * Über den Tabulator kosteten sie neun Halte; jetzt sind es drei bis fünf, je
 * nach Dokument. Dieselbe Aufnahme maß danach 8078 Pixel und misst zum
 * Stand 0.26.0 wieder 8530 – die Seite ist seither gewachsen.
 *
 * **Warum eine Radiogruppe und kein Aufklappmenü.** Dieselbe Begründung wie
 * in `Suchansicht.tsx`: Die `<fieldset>`-Radiogruppe ist genau **ein**
 * Tabulatorhalt, folgt der anwendungseigenen Anzeigegröße und hat Kontrast,
 * Zielgröße und `forced-colors` bereits belegt.
 *
 * **Warum die Überschrift des Dokuments bleibt.** Wer über Überschriften
 * navigiert, verlöre sonst drei Einträge und fände nur noch „Drucken“. Das
 * gewählte Dokument steht deshalb als `h3` über seinem Block – die
 * Überschriftenliste nennt weiterhin, was hier gerade zu haben ist.
 */
export function Druckkarte({
  profilId,
  fehleranzahl,
  kapitel,
  fragenJeBereich,
  fragenGesamt,
}: DruckkarteProps): React.JSX.Element {
  const gruppe = useId();
  const [dokument, setzeDokument] = useState<Dokument>('bericht');

  /* Die Fragenliste hängt am Katalog, nicht am Lernstand. Ohne ihn gäbe es
     nichts zu drucken – dann steht die Wahl gar nicht erst da, statt in eine
     gesperrte Schaltfläche zu führen. */
  const auswahl: readonly (readonly [Dokument, string])[] = [
    ['bericht', 'Lernbericht'],
    ['fehlerprotokoll', 'Fehlerprotokoll'],
    ...(kapitel === null ? [] : ([['fragenliste', 'Fragenliste']] as const)),
  ];

  return (
    <>
      <p>
        Drei Dokumente zum Ausdrucken oder Ablegen. Erzeugt wird jeweils eine PDF-Datei, die Sie
        selbst ablegen; die Anwendung verschickt nichts.
      </p>

      <fieldset className="drucken__wahl">
        <legend>Welches Dokument?</legend>
        <div className="drucken__wahlliste">
          {auswahl.map(([wert, beschriftung]) => {
            const feldId = `${gruppe}-${wert}`;
            return (
              <div className="drucken__wahlfeld" key={wert}>
                <input
                  id={feldId}
                  type="radio"
                  name={gruppe}
                  checked={dokument === wert}
                  onChange={() => {
                    setzeDokument(wert);
                  }}
                />
                <label htmlFor={feldId}>{beschriftung}</label>
              </div>
            );
          })}
        </div>
      </fieldset>

      {dokument === 'bericht' ? (
        <>
          <h3>Lernbericht</h3>
          <Lernberichtausgabe profilId={profilId} />
        </>
      ) : null}

      {dokument === 'fehlerprotokoll' ? (
        <>
          <h3>Fehlerprotokoll</h3>
          <Fehlerprotokollausgabe profilId={profilId} fehleranzahl={fehleranzahl} />
        </>
      ) : null}

      {dokument === 'fragenliste' && kapitel !== null ? (
        <>
          <h3>Fragenliste</h3>
          <Fragenlistenausgabe
            kapitel={kapitel}
            fragenJeBereich={fragenJeBereich}
            fragenGesamt={fragenGesamt}
          />
        </>
      ) : null}
    </>
  );
}
