import { describe, expect, it } from 'vitest';
import { benenneAbschnitt, karte, sectionHeader } from '@/ui/dom';
import { hilfeKnopf } from '@/ui/help/hilfe';
import { zugaenglicherName } from './zugaenglicherName';

/**
 * Name eines Abschnitts, wenn seine Ueberschrift einen Hilfeknopf traegt.
 *
 * Der Name einer `section` wird aus dem GANZEN Teilbaum des per
 * `aria-labelledby` verwiesenen Elements gebildet. Zeigte der Verweis auf die
 * Ueberschrift, wanderte die Beschriftung des Hilfeknopfs in den Namen: Die
 * Bereichsliste, mit der man eine Seite ueberfliegt, fuehrte dann
 * "Zeitdiagramm Hilfe zu Signalzeitenplan" statt "Zeitdiagramm". Bei einer
 * Liste von elf Bereichen entscheidet aber das erste Wort.
 *
 * Der Fall gehoert hierher und nicht in die Ansichten: Er haengt allein an
 * sectionHeader() und benenneAbschnitt(), und die bauen jede Karte.
 */

/** Ermittelt den Namen so, wie eine Sprachausgabe ihn bildet. */
function nameVon(abschnitt: HTMLElement): string {
  document.body.append(abschnitt);
  try {
    return zugaenglicherName(abschnitt);
  } finally {
    abschnitt.remove();
  }
}

describe('Name einer Abschnittskarte', () => {
  it('nennt nur den Titel, nicht den Hilfeknopf', () => {
    const abschnitt = karte(sectionHeader('Zeitdiagramm', hilfeKnopf('zwischenzeit')));
    expect(nameVon(abschnitt)).toBe('Zeitdiagramm');
  });

  it('nennt den Titel auch ohne Hilfeknopf', () => {
    const abschnitt = karte(sectionHeader('Werkzeug', null));
    expect(nameVon(abschnitt)).toBe('Werkzeug');
  });

  it('laesst die Ueberschrift eine Ueberschrift bleiben', () => {
    // Die Sprachausgabe erkundet die Seite ueber die Ueberschriftenebenen. Ein
    // Titel, der seine h2 verliert, faellt aus dieser Uebersicht heraus.
    const abschnitt = karte(sectionHeader('Haltlinien', hilfeKnopf('haltlinie')));
    const ueberschrift = abschnitt.querySelector('h2');
    expect(ueberschrift?.textContent).toContain('Haltlinien');
  });

  it('laesst den Hilfeknopf in der Ueberschrift stehen', () => {
    // Die Erklaerung gehoert dorthin, wo die Frage entsteht - der Verweis geht
    // am Knopf vorbei, der Knopf selbst bleibt sichtbar an seinem Platz.
    const abschnitt = karte(sectionHeader('Fahrlinien', hilfeKnopf('strom')));
    expect(abschnitt.querySelector('h2 .hilfe-knopf')).not.toBeNull();
  });

  it('benennt einen nachtraeglich gefuellten Abschnitt ebenso', () => {
    // Der Ableitungsbereich im Lageplan wird bei jeder Neuzeichnung geleert und
    // neu bestueckt; danach laeuft benenneAbschnitt() erneut ueber ihn.
    const abschnitt = document.createElement('section');
    abschnitt.append(sectionHeader('Ableitung aus der Zeichnung', hilfeKnopf('zwischenzeit')));
    benenneAbschnitt(abschnitt);
    expect(nameVon(abschnitt)).toBe('Ableitung aus der Zeichnung');
  });
});