(() => {
    const mainEl = document.querySelector("main");
    const lightboxContainerEl = document.querySelector(".js-lightbox");
    const lightboxEl = lightboxContainerEl.classList.contains("o-lightbox")
        ? lightboxContainerEl
        : lightboxContainerEl.querySelector(".o-lightbox");
    const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__nav-btn--prev");
    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__nav-btn--next");
    const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
    const lightboxThumbnailsEl = lightboxEl.querySelector(".o-lightbox__thumbnails");
    const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image"));

    const standalone = lightboxContainerEl.classList.contains("js-lightbox--standalone");
    let currentIndex = 0;
    let visible = !lightboxContainerEl.classList.contains("u-d-none");
    let mouseDown = false;

    const show = () => {
        visible = true;
        lightboxContainerEl.classList.remove("u-d-none");
    }

    const hide = () => {
        if (!standalone) {
            visible = false;
            lightboxContainerEl.classList.add("u-d-none");
        }
    }

    const setIndex = (i) => {
        if (i < 0 || i >= images.length) {
            return;
        }
        images[currentIndex].thumbnailEl.classList.remove("is-selected");
        currentIndex = i;
        lightboxImgEl.src = figureEls[i].firstElementChild.href;
        lightboxImgEl.alt = images[currentIndex].description;
        images[i].thumbnailEl.classList.add("is-selected");
    };

    const prev = () => setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1);

    const next = () => setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0);

    lightboxCloseEl?.addEventListener("click", hide);
    lightboxPrevEl.addEventListener("click", prev);
    lightboxNextEl.addEventListener("click", next);
    
    const images = figureEls.map((figureEl, i) => {
        const go = e => {
            e.preventDefault();
            show();
            setIndex(i);
        };

        const imgEl = figureEl.querySelector("img");
        const captionEl = figureEl.querySelector("figcaption");

        const src = imgEl.src;
        const description = captionEl?.innerHTML ?? "";

        const thumbnailButtonEl = document.createElement("button");
        const thumbnailImgEl = document.createElement("img");

        thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
        thumbnailImgEl.src = src;

        thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
        thumbnailButtonEl.appendChild(thumbnailImgEl);
        thumbnailButtonEl.addEventListener("click", go);

        lightboxThumbnailsEl.appendChild(thumbnailButtonEl);

        if (!standalone) {
            figureEl.firstElementChild.addEventListener("click", go);
        }

        return {
            thumbnailEl: thumbnailButtonEl,
            description,
        };
    });

    setIndex(0);

    if (figureEls.length <= 1) {
        lightboxPrevEl.remove();
        lightboxNextEl.remove();
        lightboxThumbnailsEl.remove();
    }

    if (!standalone) {
        document.addEventListener('mousedown', (e) => {
            if (visible) {
                mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;
            }
        });

        document.addEventListener('click', (e) => {
            if (visible && mouseDown) {
                mouseDown = false;
                e.preventDefault();
                e.stopPropagation();
                hide();
            }
        }, { capture: true });
    }

    window.addEventListener("keydown", e => {
        if (e.defaultPrevented || !visible) {
            return;
        }

        switch (e.key) {
            case "Left":
            case "ArrowLeft":
                prev();
                break;

            case "Right":
            case "ArrowRight":
                next();
                break;

            case "Esc":
            case "Escape":
                hide();
                break;

            default:
                return;
        }

        e.preventDefault();
    }, true);
})();