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

/*
 * The logo for the structured data: one image from the media library, shown as a small preview.
 * It is saved with the form, like every other value on this screen.
 */
const field = document.querySelector('[data-logo-field]');
if (field) {
  const input = field.querySelector('[name="organisationLogoMediaId"]');
  const current = field.querySelector('.favicon-current');
  const choose = field.querySelector('[data-logo-choose]');
  const remove = field.querySelector('[data-logo-remove]');

  const show = (label, src = '') => {
    current.replaceChildren();
    if (src) {
      const image = new Image(64, 64);
      image.className = 'favicon-preview logo-preview';
      image.alt = '';
      image.src = src;
      current.append(image);
    }
    const text = document.createElement('span');
    text.textContent = label;
    current.append(text);
    choose.textContent = input.value ? 'Anderes Bild wählen' : 'Bild wählen oder hochladen';
    remove.hidden = !input.value;
  };

  choose.addEventListener('click', () => openMedia({ needsAlt: false, onChoose: items => {
    if (!items.length) return;
    input.value = items[0].id;
    show(`„${items[0].title}“ – wird beim Speichern übernommen.`, items[0].variants[0].src);
    choose.focus();
  } }));
  remove.addEventListener('click', () => {
    input.value = '';
    show('Kein Logo gewählt – wird beim Speichern übernommen.');
    choose.focus();
  });
}