<template>
    <div :class="classes" :style="styles">
        <Nav />

        <Suspense>
            <router-view :key="$route.fullPath" />
        </Suspense>

        <Menu />

        <ScrollBar />
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import loadFonts from '@fuzzco/font-loader'
import { useWindowSize } from '@vueuse/core'
import Menu from '@/components/Menu.vue'
import Nav from '@/components/Nav.vue'
import ScrollBar from '@/components/ScrollBar.vue'
import useConfig from '@/composables/useConfig'

const { height } = useWindowSize()

// Theme state
const { config } = useConfig()

const classes = computed(() => [
    'container',
    { 'fonts-ready': !fontsLoading.value },
    `theme-${config.value?.theme || 'dark'}`,
])

const fontsLoading = ref(true)
onMounted(async () => {
    // Load fonts
    loadFonts([
        {
            name: 'Leibniz Fraktur',
            weights: [400],
        },
        {
            name: 'Geist Mono',
            weights: [400, 700],
        },
    ])
        .then(() => {
            fontsLoading.value = false
        })
        .catch(() => {
            fontsLoading.value = false
        })
})

const styles = computed(() => ({
    '--vh': height.value ? height.value / 100 + 'px' : '100vh',
}))
</script>

<style lang="scss">
.container {
    min-height: calc(100 * var(--vh));
    max-width: 100vw;
    overflow-x: clip;
    background: var(--theme-bg);
    color: var(--theme-fg);
    transition: opacity 400ms;

    &:not(.fonts-ready) {
        opacity: 0;
    }
}
</style>
