import { filme, serien } from '../api';
import { esc, leer, fehlerzeile, meldung } from '../util';
import { kachel, alsKachel } from '../card';

/** Suchergebnisse quer durch alle Mediatheken.
 *
 * **Nicht je Mediathek.** Wer einen Titel sucht, weiss oft gar nicht, in
 * welcher er liegt — genau deshalb steht die Suche oben in der Kopfleiste
 * und nicht in jeder Mediathek einzeln. */
export function suchseite(
  text: string,
  oeffnen: (art: 'filme' | 'serien', id: string) => void,
): HTMLElement {
  const wurzel = document.createElement('div');

  const kopf = document.createElement('div');
  kopf.className = 'seitenkopf';
  kopf.innerHTML = `<div class="wer"><h1>${esc(text)}</h1>`
    + '<div class="quelle">Suchergebnisse</div></div>';
  wurzel.appendChild(kopf);

  const buehne = document.createElement('div');
  buehne.innerHTML = '<div class="spinner"></div>';
  wurzel.appendChild(buehne);

  void (async () => {
    try {
      const [f, s] = await Promise.all([
        filme({ search: text, take: 100 }),
        serien({ search: text, take: 100 }),
      ]);

      buehne.innerHTML = '';
      if (f.total === 0 && s.total === 0) {
        buehne.appendChild(leer(`Nichts gefunden für „${text}".`));
        return;
      }

      if (f.total > 0) buehne.appendChild(abschnitt(`Filme · ${f.total}`, f.items));
      if (s.total > 0) buehne.appendChild(abschnitt(`Serien · ${s.total}`, s.items));
    } catch (fehler) {
      buehne.innerHTML = '';
      buehne.appendChild(fehlerzeile(meldung(fehler)));
    }
  })();

  function abschnitt(titel: string, eintraege: Parameters<typeof alsKachel>[0][]): HTMLElement {
    const bereich = document.createElement('section');
    const h = document.createElement('h2');
    h.textContent = titel;
    const gitter = document.createElement('div');
    gitter.className = 'raster';
    eintraege.forEach(e => gitter.appendChild(kachel(alsKachel(e), oeffnen)));
    bereich.append(h, gitter);
    return bereich;
  }

  return wurzel;
}