import { useState } from 'react';

import { bridge } from '../../bridge';

export interface DateiknoepfeProps {
  /**
   * Kennung der geschriebenen Datei, oder `undefined`.
   *
   * Fehlt sie – bei Abbruch oder in einer älteren Fassung des
   * Anwendungskerns –, erscheint hier nichts. Gespeichert ist die Datei dann
   * trotzdem, und ihr Pfad steht daneben.
   */
  readonly kennung: string | undefined;
}

/**
 * „Datei öffnen“ und „Im Ordner anzeigen“ nach einem Export.
 *
 * **Wozu.** Alle Druckausgaben und die Sicherung endeten bis 0.22.0 mit einem
 * reinen Textsatz samt Pfad. Wer die eben erzeugte Fragenliste drucken oder
 * die Sicherung auf einen Stick ziehen wollte, musste den Pfad ablesen und im
 * Explorer selbst hinnavigieren – nach „Speichern unter“ der unbequemste
 * Anschluss, den ein Programm anbieten kann. Die beiden Wege sind die
 * eingeführte Konvention jeder Windows-Anwendung.
 *
 * **Was passiert, wenn es nicht klappt.** Eine inzwischen verschobene Datei
 * lässt sich nicht öffnen. Dann steht das da, statt dass ein Klick ins Leere
 * geht und der Bildschirm so tut, als sei etwas geschehen.
 */
export function Dateiknoepfe({ kennung }: DateiknoepfeProps): React.JSX.Element | null {
  const [meldung, setzeMeldung] = useState('');
  const zeigen = bridge()?.dateiZeigen;

  if (kennung === undefined || zeigen === undefined) {
    return null;
  }

  const anfordern = (wunsch: 'oeffnen' | 'ordner'): void => {
    setzeMeldung('');
    void zeigen(kennung, wunsch)
      .then((geklappt) => {
        if (!geklappt) {
          setzeMeldung(
            'Die Datei ließ sich nicht öffnen. Möglicherweise wurde sie verschoben oder gelöscht.',
          );
        }
      })
      .catch(() => {
        setzeMeldung('Die Datei ließ sich nicht öffnen.');
      });
  };

  return (
    <>
      <div className="dateiknoepfe">
        <button
          type="button"
          className="knopf"
          onClick={() => {
            anfordern('oeffnen');
          }}
        >
          Datei öffnen
        </button>
        <button
          type="button"
          className="knopf"
          onClick={() => {
            anfordern('ordner');
          }}
        >
          Im Ordner anzeigen
        </button>
      </div>
      {/* Die Meldung ist höflich und steht sichtbar: Ein Fehlschlag hier ist
          kein Notfall, aber er darf nicht stillschweigend passieren.

          Von Anfang an im Baum, leer: Eine Live-Region, die zusammen mit
          ihrem Inhalt eingehängt wird, verschluckt ihre erste Meldung –
          NVDA, JAWS und VoiceOver sprechen sie in aller Regel nicht. Bis
          0.24.1 stand hier `{meldung === '' ? null : …}`, und genau dieser
          Fehlschlag blieb Sehenden vorbehalten. Dieselbe Regel steht in
          `Lernplanung.tsx`, `Neuanfang.tsx`, `Datensicherung.tsx` und
          `Lernberichtausgabe.tsx` ausdrücklich aufgeschrieben; dies war die
          einzige Stelle, die davon abwich.

          Neben dem Knopfpaar und nicht darin: Ein leerer Absatz in einem
          Flex-Kasten mit `gap` schöbe die Knöpfe auch dann auseinander, wenn
          nichts dasteht. */}
      <p className="dateiknoepfe__meldung" role="status">
        {meldung}
      </p>
    </>
  );
}
