export default class LightboxSingle {
  constructor(picture) {
    console.log('LightboxSingle constructor');
    const lightBox = this.buildDomLightBox(picture.getAttribute('src'));
    document.body.appendChild(lightBox);

    lightBox.classList.remove('lightbox--inactive');
    lightBox.setAttribute('aria-hidden', 'false');
    lightBox.classList.add('lightbox--active');
  }

  static init() {
    const lightboxLinks = document.querySelectorAll('.singleLightbox-link');
    if (!lightboxLinks) return;

    lightboxLinks.forEach((link) => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const picture = link.querySelector('img');
        if (!picture) return;
        new LightboxSingle(picture);
      });
    });
  }
  buildDomLightBox(pictureSrc) {
    const lightBoxDomElement = document.createElement('div');
    lightBoxDomElement.classList.add('lightbox', 'lightbox--inactive');
    lightBoxDomElement.setAttribute('aria-hidden', 'true');

    lightBoxDomElement.innerHTML = `<div class="lightbox__container">
		<button class="lightbox__close cta cta--button cta--button--mini cta--outline">
			Fermer
		</button>

		<div class="lightbox__current-picture">
			<img src="${pictureSrc}" alt="" />
		</div>

	</div>`;

    return lightBoxDomElement;
  }
}

// export default function initSingleLightbox() {
//   LightboxSingle.init();
// }