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"),
}

async function startPresents(){
    await new PresentsHandler().showPresents();
}

const callbacks = {
    home: () => {},
    unterkunft: () => {},
    tagesablauf: () => {},
    geschenke: startPresents,
}

$(document).foundation();

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

    let currentSite = "home";

    //Scroll-Element
    mainDiv.addEventListener("scroll", e => {
        console.log("scrolling!", e);
    });


    //Navigation
    container.innerHTML = templates.home;
    document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
        elem.addEventListener("click", () => {
            const oldActive = document.querySelector(".menu .active");
            if (oldActive){
                oldActive.classList.remove("active");
            }
            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]();
            }
        });
    })
});