<script lang="ts">
    import { location, navigation, sites, temperature, banner, serviceNavigation } from "./lib/stores"
    import Header from "./lib/components/header/Header.svelte"
    import Footer from "./lib/components/Footer.svelte"
    import { Route, Router } from "svelte-routing"
    import HomePage from "./routes/HomePage.svelte"
    import { loadNavigation } from "./lib/functions/loadNavigation"
    import { loadBanner } from "./lib/functions/loadBanner"
    import { loadSites } from "./lib/functions/loadSites"
    import { loadTemperature } from "./lib/functions/loadTemperature"
    import SiteComp from "./routes/Site.svelte"
    import NotFound from "./routes/NotFound.svelte"
    import BannerComp from "./lib/components/pagebuilder/banner.svelte"
    import ScrollTop from "./lib/components/pagebuilder/scrollTop.svelte"
    import ScrollDown from "./lib/components/pagebuilder/scrollDown.svelte"
    export let url = ""

    if (url) {
        // ssr
        let l = url.split("?")
        $location = {
            path: l[0],
            search: l.length > 1 ? l[1] : "",
            hash: "",
            categoryPath: l[0].replace(/\/[^_\/]+_[^\/]+$/, ""),
            push: false,
            pop: false,
        }
    }

    async function getNavigation() {
        let nav: Navigation[] = await loadNavigation()
        $navigation = nav[0]
        $serviceNavigation = nav[1]
    }
    async function getBanner() {
        let bannerRes: Banner[] = await loadBanner()
        $banner = bannerRes
    }
    async function getSites() {
        let sitesArray: Site[] = await loadSites()
        let sitesRes: Sites = {}
        sitesArray.forEach((e) => {
            sitesRes[e.id] = e
        })
        $sites = sitesRes
        console.log("ALARM OVER", $sites)
    }

    getNavigation()
    getSites()
    getBanner()

    $: {
        if (Object.values($sites).length == 0) {
            getSites()
        }
    }

    // scroll to top on new site
    location.subscribe((l) => {
        if (l.push) scrollTo({ top: 0 })
    })
</script>

<main class="">
    <Header />
    <div class="content-container" id="siteContainer">
        <Router url="{url}">
            <Route path="/">
                <HomePage />
            </Route>
            <Route path="/*path" let:params>
                {#key $sites}
                    <SiteComp path="{params.path}" />{/key}
            </Route>
            <Route>
                <NotFound />
            </Route>
        </Router>
        <Footer />
    </div>
    <button class="arrow-up" on:click="{() => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })}"> </button>

    <ScrollTop />
    <ScrollDown />

    <BannerComp />
    <div class="socialMedia">
        <a target="_blank" href="https://www.facebook.com/allkids.erfurt/">
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z"
                    fill="var(--link-font-color)"></path>
            </svg>
        </a>
    </div>
</main>

<style lang="less">
    @import "./lib/assets/css/variables.less";
    @import "./lib/assets/css/fonts.less";
    @font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto Condensed";
        font-style: normal;
        font-weight: 400;
        src: url("./lib/assets/fonts/roboto-condensed-v25-latin-regular.eot");
        src: url("./lib/assets/fonts/roboto-condensed-v25-latin-regular.eot") format("embedded-opentype"),
            url("./lib/assets/fonts/roboto-condensed-v25-latin-regular.woff2") format("woff2"),
            url("./lib/assets/fonts/roboto-condensed-v25-latin-regular.woff") format("woff"),
            url("./lib/assets/fonts/roboto-condensed-v25-latin-regular.ttf") format("truetype"),
            url("./lib/assets/fonts/roboto-condensed-v25-latin-regular.svg") format("svg");
    }
    /* orbitron-regular - latin */
    @font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Orbitron";
        font-style: normal;
        font-weight: 900;
        src: url("./lib/assets/fonts/orbitron-v31-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    .socialMedia {
        display: none;
    }

    @media @tablet {
        .socialMedia {
            position: fixed;
            top: 50%;
            transform: translate(60%, -50%);
            right: 2.25vw;
            display: flex;
            flex-direction: column;
            z-index: 1000;
        }
    }

    main {
        font-family: "Roboto Condensed", sans-serif;
        overflow: hidden;
        max-width: @body-maxwidth;
        width: 100vw;
        overflow-x: hidden;
        display: flex;
        align-items: center;
        flex-direction: column;
        color: var(--normal-font-color);

        .content-container {
            display: flex;
            z-index: 10;
            min-height: 100vh;
            flex-direction: column;
            width: 100%;
            align-items: center;

            overflow: hidden;
            justify-content: space-between;
        }
    }
    @media (min-width: 1800px) {
        .socialMedia {
            right: calc(50vw - 900px);
            transform: translate(-50%, -50%);
        }
        .arrow-up {
            right: calc(50vw - 900px) !important;
        }
    }
</style>
