<script lang="ts">
    import Footer from "./lib/components/Footer.svelte"
    import Header from "./lib/components/Menu/Header.svelte"
    import Menu from "./lib/components/Menu/Menu.svelte"
    import NotFound from "./lib/components/NotFound.svelte"
    import Rows from "./lib/components/Pagebuilder/Rows.svelte"
    import { location, navigation, pages, serviceNavigation } from "./lib/store"
    import { Route, Router } from "svelte-routing"
    import { loadPages } from "./lib/functions/getPages"
    import { loadNavigation } from "./lib/functions/loadNavigation"
    export let url = ""

    if (url) {
        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 getPages() {
        let pagesArray = await loadPages()
        let pagesRes: Pages = {}

        pagesArray.forEach((e) => {
            pagesRes[e.path] = e
        })
        $pages = pagesRes
        console.log(pagesRes)
    }

    async function getNavigation() {
        let nav: Navigation[] = await loadNavigation()
        console.log(nav)
        $navigation = nav[0]
        $serviceNavigation = nav[1]
    }

    getNavigation()
    getPages()

    let activeMenu = false
</script>

<main class="">
    <Header bind:active="{activeMenu}" />
    <div class="content-container" id="siteContainer" data-url="{url}">
        <Router url="{url}">
            <Route path="/">
                <Rows path="/" homepage="{true}" />
            </Route>
            <Route path="/*path" let:params>
                <Rows path="/{params?.path}" homepage="{false}" />
            </Route>
            <Route>
                <NotFound />
            </Route>
        </Router>
    </div>
    <Footer />
</main>

<Menu bind:active="{activeMenu}" />

<style lang="less" global>
    @import "./lib/assets/css/main.less";
    @import "./lib/assets/css/base.less";
    main {
        overflow: hidden;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        @media @mobile {
            font-size: @bodyfontsize;
        }
        @media @tablet {
            font-size: @bodyfontsize_desktop;
        }
    }
    @font-face {
        font-display: swap;
        font-family: "Libre Franklin";
        font-style: normal;
        font-weight: 400;
        src: url("./lib/assets/fonts/libre-franklin-v13-latin-regular.woff2") format("woff2");
    }
</style>
