<script lang="ts">
    import { onDestroy } from "svelte"
    import { getEventCallbacks, registerEventCallback, unregisterEventCallback } from "./lib/functions/eventBus"
    import { loadModulesAndSetStore } from "./lib/functions/fetch/loadModules"
    import { location, pages, rerender } from "./lib/store"
    import { Route, Router, links } from "../../vendor/svelte-routing"
    import Footer from "./lib/components/Footer.svelte"
    import Header from "./lib/components/Header.svelte"
    import Page from "./routes/Page.svelte"
    import ScrollTop from "./lib/components/ScrollTop.svelte"
    import ScrollBottom from "./lib/components/ScrollBottom.svelte"
    import { loadContentAndSetStores } from "./lib/functions/fetch/loadContentAndSetStores"
    import { loadNavigationAndSetStores } from "./lib/functions/fetch/loadNavigationAndSetStores"
    import { loadLibraryAndSetStore } from "./lib/functions/fetch/loadLibraryAndSetStores"

    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,
        }
    }
    function registerEvent() {
        let callbacks = getEventCallbacks("navigate")
        if (callbacks && callbacks["rerender"]) return
        registerEventCallback("navigate", "rerender", () => {
            $rerender = !$rerender
            return true
        })
    }
    registerEvent()
    onDestroy(() => {
        let callbacks = getEventCallbacks("navigate")
        if (callbacks["rerender"]) unregisterEventCallback("navigate", "rerender")
    })
    loadModulesAndSetStore()

    loadNavigationAndSetStores()
    loadLibraryAndSetStore()
    loadContentAndSetStores()
</script>

<main use:links>
    <Header></Header>
    <Router {url}>
        <Route path="/" component="{Page}" />
        <Route path="/*path" let:params>
            {#key $rerender}
                <Page path="/{params?.path}" isHomepage="{false}"></Page>
            {/key}
        </Route>
    </Router>
    <Footer></Footer>
</main>

<ScrollTop />
<ScrollBottom />

<style lang="less" global>
    @import "./lib/assets/css/variables.less";
    @import "./lib/assets/css/main.less";
    @import "swiper/swiper-bundle.min.css";
    @import "swiper/modules/effect-fade/effect-fade";
    @import "swiper/modules/navigation/navigation";
    @import "swiper/modules/pagination/pagination";
    .swiper-button-prev,
    .swiper-button-next {
        transform-origin: left;
        color: #333;
        transform: scale(0.3);
        background-color: rgba(255, 255, 255, 0.6);
        top: 50%;
        padding: 10px;
        height: 70px;
        width: 70px;
        border-radius: 50px;
    }
    .swiper-button-prev {
        left: 6%;
    }
    .swiper-button-next {
        right: 6%;
        transform-origin: right;
    }
    html,
    body {
        font-family: "Libre Franklin", sans-serif;
        button {
            font-family: "Libre Franklin", sans-serif;
        }
        @media @mobile {
            font-size: @bodyfontsize;
            line-height: 1.4;
        }
        @media @tablet {
            font-size: @bodyfontsize_desktop;
            line-height: 1.6;
        }
    }
    main {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        align-items: center;
    }
    @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");
    }

    @font-face {
        font-display: swap;
        font-family: "Libre Caslon Text";
        font-style: normal;
        font-weight: 400;
        src: url("./lib/assets/fonts/LibreCaslonText-Regular.woff2") format("woff2");
    }
</style>
