/**
 * Lightbox pro galerie vložené z ContentBuilderu.
 *
 * Obsah stránky se vykresluje přes v-html, kde se `<script>` nikdy nespustí —
 * galerie proto do stránky přichází jako čisté HTML se styly a prohlížeč
 * obrázků startujeme až odsud. GLightbox je součástí balíku ContentBuilderu,
 * bereme ho z jeho složky a načítáme až ve chvíli, kdy je na stránce galerie.
 */

const GLIGHTBOX_CSS = "/cb/assets/scripts/glightbox/glightbox.min.css";
const GLIGHTBOX_JS = "/cb/assets/scripts/glightbox/glightbox.min.js";
const GRID_SELECTOR = ".is-media-grid";

type Lightbox = {destroy: () => void};
type LightboxFactory = (options: Record<string, unknown>) => Lightbox;

let assetsPromise: Promise<void> | null = null;
let lightboxes: Lightbox[] = [];

function loadAssets(): Promise<void> {
    if (assetsPromise) return assetsPromise;

    assetsPromise = new Promise<void>((resolve, reject) => {
        if (!document.querySelector(`link[href="${GLIGHTBOX_CSS}"]`)) {
            const style = document.createElement("link");
            style.rel = "stylesheet";
            style.href = GLIGHTBOX_CSS;
            document.head.appendChild(style);
        }

        const script = document.createElement("script");
        script.src = GLIGHTBOX_JS;
        script.onload = () => resolve();
        script.onerror = () => reject(new Error("GLightbox se nepodařilo načíst"));
        document.head.appendChild(script);
    });

    return assetsPromise;
}

function destroyAll(): void {
    lightboxes.forEach((instance) => instance.destroy());
    lightboxes = [];
}

/**
 * Nastartuje lightbox nad galeriemi na aktuální stránce.
 *
 * Každá galerie dostane vlastní instanci — vzhled prohlížeče si redaktor
 * nastavuje v dialogu bloku a nastavení dorazí v data atributech mřížky.
 * Volá se i po přechodu na jinou stránku, proto se předchozí instance ruší:
 * jinak by si držely odkazy na fotky, které už na stránce nejsou.
 */
export function initContentGalleries(): void {
    const grids = document.querySelectorAll<HTMLElement>(GRID_SELECTOR);

    if (!grids.length) {
        destroyAll();
        return;
    }

    loadAssets()
        .then(() => {
            const factory = (window as unknown as {GLightbox?: LightboxFactory}).GLightbox;
            if (!factory) return;

            destroyAll();

            grids.forEach((grid) => {
                // Bez id nemá GLightbox jak jednu galerii odlišit od druhé.
                if (!grid.id) grid.id = `gallery-${Math.random().toString(36).slice(2, 9)}`;
                if (!grid.querySelector(".glightbox")) return;

                lightboxes.push(factory({
                    selector: `#${grid.id} .glightbox`,
                    touchNavigation: true,
                    loop: true,
                    autoplayVideos: true,
                    zoomable: grid.dataset.lightboxZoomable !== "no",
                    slideEffect: grid.dataset.lightboxSlide || "slide",
                    descPosition: grid.dataset.lightboxCaptionPos || "bottom",
                    skin: grid.dataset.lightboxSkin || "clean",
                }));
            });
        })
        .catch(() => {
            // Bez lightboxu galerie pořád funguje, odkaz vede na fotku
        });
}