(() => {
    const enableFocusIndicator = e => {
        if (e.key !== 'Tab') {
            return;
        }

        document.body.classList.add('t-keyboard');
        document.removeEventListener('keydown', enableFocusIndicator);
        document.addEventListener('mousedown', disableFocusIndicator);
    }

    const disableFocusIndicator = () => {
        document.body.classList.remove('t-keyboard');

        document.removeEventListener('mousedown', disableFocusIndicator);
        document.addEventListener('keydown', enableFocusIndicator);
    }

    document.addEventListener('keydown', enableFocusIndicator);
})();

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

    const mainEl = document.querySelector("main");
    const lightboxContainerEl = document.querySelector(".js-lightbox");
    const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox");
    const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn");
    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
    const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
    const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));

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

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

    const setIndex = (i) => {
        thumbnailEls[currentIndex].classList.remove("is-selected");
        currentIndex = i;
        lightboxImgEl.src = figureEls[i].href;
        thumbnailEls[i].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 thumbnailEls = figureEls.map((figureEl, i) => {
        const go = e => {
            e.preventDefault();
            show();
            setIndex(i);
        };

        figureEl.addEventListener("click", go);

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

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

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

        if (i === currentIndex) {
            thumbnailButtonEl.classList.add("is-selected");
        }

        lightboxFooterEl.appendChild(thumbnailButtonEl);

        return thumbnailButtonEl;
    });

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