(() => {
    let currentIndex = 0;
    let visible = false;

    const mainEl = document.querySelector("main");
    const lightboxEl = document.querySelector(".c-lightbox");
    const lightboxBgEl = lightboxEl.querySelector(".c-lightbox__bg");
    const lightboxCountEl = lightboxEl.querySelector(".c-lightbox__count");
    const lightboxCloseEl = lightboxEl.querySelector(".c-lightbox__close");
    const lightboxPrevEl = lightboxEl.querySelector(".c-lightbox__prev");
    const lightboxNextEl = lightboxEl.querySelector(".c-lightbox__next");
    const lightboxImgEl = lightboxEl.querySelector(".c-lightbox__img");
    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));

    const show = () => {
        visible = true;
        lightboxEl.classList.add("is-shown");
    }

    const hide = () => {
        visible = false;
        lightboxEl.classList.remove("is-shown");
    }

    const setIndex = (i) => {
        currentIndex = i;
        lightboxImgEl.src = figureEls[i].href;
        lightboxCountEl.textContent = (i + 1) + " / " + figureEls.length;
        lightboxPrevEl.classList.toggle("u-dn", i === 0);
        lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1);
    };

    const prev = () => {
        currentIndex === 0 ? void 0 : setIndex(currentIndex - 1);
    };

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

    lightboxBgEl.addEventListener("click", hide);
    lightboxCloseEl.addEventListener("click", hide);
    lightboxPrevEl.addEventListener("click", prev);
    lightboxNextEl.addEventListener("click", next);
    
    figureEls.forEach((figureEl, i) => {
        figureEl.addEventListener("click", e => {
            e.preventDefault();
            show();
            setIndex(i);
        })
    });

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