/**
 * @property {HTMLElement} lightBox
 **/
export default class LightboxSingle {
  constructor(picture) {
    this.lightBox = this.buildDomLightBox(picture.getAttribute('src'));
    this.onKeyUp = this.onKeyUp.bind(this);
    document.body.appendChild(this.lightBox);

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

    document.addEventListener('keyup', this.onKeyUp);

    this.lightboxCloseButton = this.lightBox.querySelector('.lightbox__close');
    this.lightboxCloseButton.focus();

    
  }

  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);
      });
    });
  }

  /**
   * Ferme la lightbox
   * @param {MouseEvent} e
   */
  close(e) {
    e.preventDefault();
    this.lightBox.classList.add('fade-out');
    window.setTimeout(() => {
      this.lightBox.classList.remove('fade-out');
      this.lightBox.classList.remove('lightbox--active');
      this.lightBox.classList.add('lightbox--inactive');
      this.lightBox.setAttribute('aria-hidden', 'true');
      this.lightBox.querySelector('.lightbox__container').remove();
    }, 500);
    document.removeEventListener('keyup', this.onKeyUp);
  }

  /**
   * Ferme la lightbox
   * @param {KeyboardEvent} e
   */
  onKeyUp(e) {
    if (e.key === 'Escape') {
      this.close(e);
    }
  }

  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>`;
    lightBoxDomElement
      .querySelector('.lightbox__close')
      .addEventListener('click', this.close.bind(this));

    return lightBoxDomElement;
  }
}

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