export const b = {
  init: 'activatePostImages',
}

const POST_IMAGES_SELECTOR = 'img.post-image:not(aside img.post-image)'

let images = [];
let currentIndex = 0;

export function activatePostImages(_, __, ___) {
  const images = document.querySelectorAll(POST_IMAGES_SELECTOR);
  images.forEach(image => {
    image.style.cursor = 'pointer';
    image.dataset.s = 'collectImages';
  });
}

export function collectImages(_, sender, el) {
  if (!el.contains(sender)) return;
  images = Array.from(el.querySelectorAll(POST_IMAGES_SELECTOR));
  currentIndex = images.indexOf(sender);
  b.trigger('showLightbox');
}

export function showLightbox(_, __, el) {
  const originalImg = images[currentIndex];
  const lightboxImg = el.querySelector('img');
  const anchor = el.querySelector('a');
  anchor.href = originalImg.src;
  lightboxImg.src = originalImg.src;
  lightboxImg.alt = originalImg.alt;

  if (!el.open) {
    el.showModal();
  }

  b.trigger('lightboxSetCounter');
}

export function closeLightbox(_, __, el) {
  el.close();
}

export function lightboxSetCounter(_, __, el) {
  el.innerText = `${currentIndex + 1}/${images.length}`;
}

export function lightboxNext(_, __, ___) {
  if (images.length == 1) return;
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  b.trigger('showLightbox');
}

export function lightboxPrevious(_, __, ___) {
  if (images.length == 1) return;
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }
  b.trigger('showLightbox');
}