<script lang="ts">
    import '../style/global.scss'

    import { browser } from '$app/environment'
    import { page } from '$app/stores'
    import { beforeNavigate } from '$app/navigation'
    import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
    import type { PageData } from './$types'
    import { onMount, setContext } from 'svelte'
    import { pageLoading, previousPage } from '$utils/stores'
    import '$utils/polyfills'
    // Components
    import SVGSprite from '$components/SVGSprite.svelte'
    import SmoothScroll from '$components/SmoothScroll.svelte'
    import Analytics from '$components/Analytics.svelte'
    import Switcher from '$components/molecules/Switcher.svelte'
    import Footer from '$components/organisms/Footer.svelte'

    export let data: PageData

    let innerHeight: number
    $: innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)

    // Fonts to preload
    const fonts = [
        'G-Light',
        'G-Regular',
        'G-Medium',
        'G-Semibold',
        'J-Extralight',
        'J-Light',
    ]

    // Set global data
    setContext('global', data)


    /**
     * On page change
     */
    // Store previous page (for photo Viewer close button)
    beforeNavigate(({ from }) => {
        $previousPage = from.url.pathname
    })

    // Define page loading
    $: browser && document.body.classList.toggle('is-loading', $pageLoading)


    onMount(() => {
        // Avoid FOUC
        document.body.style.opacity = '1'
    })
</script>

<svelte:window bind:innerHeight />

<svelte:head>
    <link rel="canonical" href={$page.url.href} />

    {#each fonts as font}
        <link rel="preload" href="/fonts/{font}.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    {/each}
</svelte:head>


<Switcher />

<slot />

{#if !$page.params.photo}
    <Footer />
{/if}

<SVGSprite />
<SmoothScroll />

{#if browser}
    <Analytics domain={PUBLIC_ANALYTICS_DOMAIN} />
{/if}