import { Controller } from '@hotwired/stimulus'
import GLightbox from 'glightbox'

/* stimulusFetch: 'lazy' */
export default class extends Controller {

    static targets = ['item']

    connect() {
        this.lightbox = GLightbox({
            elements: this.itemTargets.map((el) => ({
                href: el.dataset.galleryHref,
                type: 'image',
                alt: el.dataset.galleryAlt ?? '',
            })),
        })

        this.itemTargets.forEach((el, index) => {
            el.addEventListener('click', (e) => {
                e.preventDefault()
                this.lightbox.openAt(index)
            })
        })
    }

    disconnect() {
        this.lightbox.destroy()
    }
}