<script lang="ts">
    import { page } from '$app/stores'
    import { afterUpdate } from 'svelte'
    import { fade } from 'svelte/transition'
    import { scrollToTop } from '$utils/functions'
    import { pageLoading } from '$utils/stores'
    import { DELAY, DURATION } from '$utils/constants'

    let loadingTimeout: ReturnType<typeof setTimeout> | number = null

    $: doNotScroll = !$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')

    // Hide page loading indicator on page update
    afterUpdate(() => {
        clearTimeout(loadingTimeout)
        loadingTimeout = setTimeout(() => $pageLoading = false, DURATION.PAGE_IN)
    })
</script>

<div class="page"
    in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
    out:fade={{ duration: DURATION.PAGE_OUT }}
    on:outrostart={() => {
        // Show page loading indicator
        $pageLoading = true
    }}
    on:outroend={() => {
        // Scroll back to top
        doNotScroll && requestAnimationFrame(() => scrollToTop())
    }}
>
    <slot />
</div>