import * as $ from "jquery";
import "foundation-sites/dist/js/foundation.es6";
import {PresentsHandler} from "./PresentsHandler";

const templates = {
    home: require("../html/home.html"),
    unterkunft: require("../html/unterkunft.html"),
    tagesablauf: require("../html/tagesablauf.html"),
    geschenke: require("../html/geschenke.html"),
}


const callbacks = {
    home: () => {
    },
    unterkunft: () => {
    },
    tagesablauf: () => {
        let state = "godi";
        let scrollTimeout = null;
        let scrollToView = false;

        const infoImageContainer = document.getElementById("info-image-container");
        infoImageContainer.querySelectorAll(".circler").forEach(circle => {
            circle.addEventListener("click", () => {
                state = (<HTMLElement>circle).dataset["state"];
                infoImageContainer.dataset["state"] = state;
                scrollToView = true;
                document.querySelector(".anchor[data-state='" + state + "']").scrollIntoView({
                    "behavior": "smooth",
                    "block": "start"
                });
            });
        });

        const navBar = document.querySelector(".top-bar");
        const anchors = document.querySelectorAll(".anchor");
        const margin = navBar.clientHeight + 50;

        const observerDown = new IntersectionObserver(entries => {
            entries.some(entry => {
                if (!entry.isIntersecting && entry.intersectionRect.top === margin && !scrollToView) {
                    state = (<HTMLElement>entry.target).dataset["state"];
                }
            });
        }, {threshold: 1, rootMargin: "-" + margin + "px 0px 0px 0px"});
        // }, {threshold: 1, rootMargin: "-100px 0px 0px 0px"});
        const observerUp = new IntersectionObserver(entries => {
            entries.some(entry => {
                if (entry.isIntersecting && entry.intersectionRect.top === navBar.clientHeight && !scrollToView) {
                    state = (<HTMLElement>entry.target).dataset["state"];
                }
            });
        }, {threshold: 0.1});

        anchors.forEach(anchor => {
            observerDown.observe(anchor);
            observerUp.observe(anchor);
        })

        document.querySelector("#info-image-container + .site-content").addEventListener("scroll", e => {
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(() => {
                scrollTimeout = null;
                infoImageContainer.dataset["state"] = state;
                scrollToView = false;
                console.log("stopped scrolling")
            }, 50);
        });
    },
    geschenke: async () => await new PresentsHandler().showPresents(),
}

$(document).foundation();

$(function () {
    const container = document.getElementById("main-content");
    const img = document.getElementById("home-img-container");
    const navbar = document.getElementById("main-menu");

    let currentSite = "home";

    //Navigation
    container.innerHTML = templates.home;
    document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
        elem.addEventListener("click", () => {
            const oldActive = document.querySelectorAll(".menu .active");
            oldActive.forEach(elem => elem.classList.remove("active"));

            const nowActive = document.querySelectorAll(".menu li[data-site='" + elem.dataset["site"] + "']");
            nowActive.forEach(elem => elem.classList.add("active"));

            container.innerHTML = templates[elem.dataset["site"]];
            if (elem.dataset["img"] === "1") {
                img.classList.remove("hidden");
            } else {
                img.classList.add("hidden");
            }

            currentSite = elem.dataset["site"];

            if (typeof callbacks[currentSite] === "function") {
                callbacks[currentSite]();
            }
        });
    })
});