class PhotoSwipeHistoryPlugin {
    constructor(lightbox, key) {
        let ignoreChangeEvent = false;
        let ignoreClosingEvent = false;
        let ignorePopstateEvent = false;

        const getState = () => {
            return window.history.state?.photoSwipeHistoryPlugin;
        };

        const onHistoryChange = () => {
            if(ignorePopstateEvent) {
                ignorePopstateEvent = false;
                return;
            }
            const state = getState();
            const opened = state?.key === key;
            if(opened) {
                ignoreChangeEvent = true;
                lightbox.loadAndOpen(state.index)
            } else {
                if(lightbox.pswp) {
                    ignoreClosingEvent = true;
                    lightbox.pswp.close()
                }
            }
        };

        lightbox.on("change", () => {
            if(ignoreChangeEvent) {
                ignoreChangeEvent = false;
                return;
            }
            const state = getState();
            const nextState = {
                photoSwipeHistoryPlugin: {
                    key,
                    index: lightbox.pswp.currIndex,
                },
            };
            const opened = state?.key === key;
            if(opened) {
                window.history.replaceState(nextState, "")
            } else {
                window.history.pushState(nextState, "")
            }
        })

        window.addEventListener("popstate", onHistoryChange)
        onHistoryChange()

        lightbox.on("close", () => {
            if(ignoreClosingEvent) {
                ignoreClosingEvent = false;
                return;
            }
            ignorePopstateEvent = true;
            window.history.back()
        })
    }
}

const initNavbar = () => {
    const elItems = document.querySelector("#menu-items");
    const elHamburger = document.querySelector("#menu-hamburger");
    const elClose = document.querySelector("#menu-close");
    const elsItems = elItems.querySelectorAll(":scope > a");
    let opened = false;

    const onHistoryChange = () => {
        opened = window.history.state?.menu === true;
        elItems.setAttribute("data-js-css-opened", opened ? "true" : "false")
    };

    window.addEventListener("popstate", onHistoryChange)
    onHistoryChange()

    elHamburger.addEventListener("click", () => {
        window.history.pushState({ menu: true }, "")
        onHistoryChange()
    })
    elClose.addEventListener("click", () => {
        window.history.back()
    })

    const onItemClick = ev => {
        if(!opened) return;
        ev.preventDefault()
        const el = ev.currentTarget;
        const href = el.getAttribute("href");
        window.location.replace(href)
    };
    for(let i=0; i<elsItems.length; i++) {
        elsItems[i].addEventListener("click", onItemClick)
    }
};
initNavbar()

const initPhotoswipeGalleries = () => {
    const galleries = new Map();
    const triggers = Array.from(document.querySelectorAll("[data-pswp]"));
    for(const trigger of triggers) {
        const key = trigger.dataset.pswp;
        if(galleries.get(key) === undefined) {
            galleries.set(key, [])
        }
        galleries.get(key).push(trigger)
    }
    for(const [key, triggers] of galleries.entries()) {
        const trigger = triggers[0];
        const animationType = trigger.getAttribute("data-pswp-anim") ?? "zoom";
        const pswp = new window.PhotoSwipeLightbox({
            gallery: document.body,
            pswpModule: window.PhotoSwipe,
            children: triggers,
            bgOpacity: .92,
            tapAction: "close",
            showHideAnimationType: animationType,
            paddingFn: viewportSize => {
                if(viewportSize.x > 600) {
                    return { top: 32, right: 64, bottom: 32, left: 64 };
                } else {
                    return { top: 0, right: 0, bottom: 0, left: 0 };
                }
            },
            history: true,
        });
        new window.PhotoSwipeDynamicCaptionPlugin(pswp, {
            type: "auto",
            // aby to nebralo výchozí caption z alt atributu obrázku
            captionContent: slide => {
                return slide.data.element.querySelector(".pswp-caption-content")?.innerHTML ?? undefined;
            },
        });
        if(animationType === "zoom") {
            new window.PhotoSwipeObjectPositionPlugin(pswp);
        }
        new PhotoSwipeHistoryPlugin(pswp, key);
        pswp.init()
    }
};
initPhotoswipeGalleries()

const initGoogleMap = async () => {
    const targetEl = document.querySelector("#google-map");
    const mapID = targetEl.getAttribute("data-js-map-id");
    const lng = parseFloat(targetEl.getAttribute("data-js-lng"));
    const lat = parseFloat(targetEl.getAttribute("data-js-lat"));

    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const map = new Map(targetEl, {
        center: { lng, lat },
        zoom: 14,
        mapId: mapID,
    });
    const marker = new AdvancedMarkerElement({
        map,
        position: { lng, lat },
    });
};
initGoogleMap()