import { openMedia } from './media.js';

/*
 * Bildfelder in Formularen der Verwaltung: Vorschaubild beim Teilen, Beitragsbild.
 *
 * Über den Dokumentknoten statt je Feld, weil die Suche in der Inhaltsliste die Ergebnisse
 * austauscht - ein Feld, das danach erscheint, funktioniert trotzdem.
 */
document.addEventListener('click', event => {
  const button = event.target.closest('[data-media-choose], [data-media-remove]');
  const field = button?.closest('[data-media-field]');
  if (!field) return;
  const input = field.querySelector('input[type="hidden"]');
  const thumb = field.querySelector('.media-field-thumb');
  const name = field.querySelector('.media-field-name');
  const choose = field.querySelector('[data-media-choose]');
  const remove = field.querySelector('[data-media-remove]');
  const show = item => {
    input.value = item?.id ?? '';
    thumb.hidden = !item;
    if (item) thumb.src = item.variants[0].src; else thumb.removeAttribute('src');
    name.textContent = item ? item.title : 'Kein Bild gewählt';
    choose.textContent = item ? 'Anderes Bild wählen' : 'Bild wählen oder hochladen';
    remove.hidden = !item;
    input.dispatchEvent(new Event('change', { bubbles: true }));
  };
  if (button.matches('[data-media-remove]')) { show(null); choose.focus(); return; }
  // Kein Alternativtext nötig: das Bild erscheint als Vorschau beim Teilen oder in einer Karte,
  // deren Titel schon sagt, worum es geht.
  openMedia({ needsAlt: false, onChoose: ([item]) => { if (item) show(item); } });
});