import { SwiperGallery } from "../swiper/SwiperGallery";

export const ModalGallery = (name) => {
  const swiper = SwiperGallery();
  const modalEl = document.querySelector(`[data-widget="${name}"]`);
  const btnEl = document.querySelectorAll(`[data-role="${name}"]`);

  if (btnEl.length === 0 && !modalEl) return false;
  const btnModalEl = modalEl.querySelector('.modal-gallery__close');

  const open = () => {
    return modalEl.classList.add('modal-gallery--active');
  }

  const close = () => {
    return modalEl.classList.remove('modal-gallery--active');
  }

  btnEl.forEach((item) => {
    item.addEventListener('click', () => {
      open();
      const slideIndex = item.dataset.slide;
      swiper.init();
      swiper.activeIndex = Number(slideIndex);
    }, false);
  })

  btnModalEl.addEventListener('click', close, false);
}