document.addEventListener("DOMContentLoaded", function () {

    const galleries = document.querySelectorAll(".wp-block-gallery");

    galleries.forEach(function (gallery) {

        const images = Array.from(
            gallery.querySelectorAll("img")
        );

        images.forEach(function (img, index) {

            img.addEventListener("click", function (e) {

                e.preventDefault();

                let current = index;

                const overlay = document.createElement("div");
                overlay.className = "ggll-lightbox";

                const display = document.createElement("img");

                const close = document.createElement("div");
                close.className = "ggll-close";
                close.innerHTML = "&times;";

                const prev = document.createElement("div");
                prev.className = "ggll-prev";
                prev.innerHTML = "&#10094;";

                const next = document.createElement("div");
                next.className = "ggll-next";
                next.innerHTML = "&#10095;";

                function getFullImage(src) {
                    return src.replace(
                        /-\d+x\d+(?=\.(jpg|jpeg|png|gif|webp))/i,
                        ""
                    );
                }

                function loadImage() {
                    display.src = getFullImage(images[current].src);

                    if (images.length <= 1) {
                        prev.style.display = "none";
                        next.style.display = "none";
                    }
                }

                overlay.appendChild(display);
                overlay.appendChild(close);
                overlay.appendChild(prev);
                overlay.appendChild(next);

                document.body.appendChild(overlay);

                loadImage();

                next.addEventListener("click", function (e) {
                    e.stopPropagation();

                    current++;

                    if (current >= images.length) {
                        current = 0;
                    }

                    loadImage();
                });

                prev.addEventListener("click", function (e) {
                    e.stopPropagation();

                    current--;

                    if (current < 0) {
                        current = images.length - 1;
                    }

                    loadImage();
                });

                close.addEventListener("click", function () {
                    overlay.remove();
                });

                overlay.addEventListener("click", function (e) {
                    if (e.target === overlay) {
                        overlay.remove();
                    }
                });

                function keyNavigation(e) {

                    if (!document.body.contains(overlay)) {
                        document.removeEventListener(
                            "keydown",
                            keyNavigation
                        );
                        return;
                    }

                    if (e.key === "Escape") {
                        overlay.remove();
                    }

                    if (e.key === "ArrowRight") {
                        next.click();
                    }

                    if (e.key === "ArrowLeft") {
                        prev.click();
                    }
                }

                document.addEventListener(
                    "keydown",
                    keyNavigation
                );

            });

        });

    });

    const singleImages = document.querySelectorAll(
        ".wp-block-image img"
    );

    singleImages.forEach(function (img) {

        if (img.closest(".wp-block-gallery")) {
            return;
        }

        img.addEventListener("click", function () {

            const overlay = document.createElement("div");
            overlay.className = "ggll-lightbox";

            const display = document.createElement("img");

            display.src = img.src.replace(
                /-\d+x\d+(?=\.(jpg|jpeg|png|gif|webp))/i,
                ""
            );

            const close = document.createElement("div");
            close.className = "ggll-close";
            close.innerHTML = "&times;";

            overlay.appendChild(display);
            overlay.appendChild(close);

            document.body.appendChild(overlay);

            close.onclick = function () {
                overlay.remove();
            };

            overlay.onclick = function (e) {
                if (e.target === overlay) {
                    overlay.remove();
                }
            };

        });

    });

});