<script lang="ts">
    import '../style/style.scss'
    import { navigating, page } from '$app/stores'
    import { beforeNavigate } from '$app/navigation'
    import { onMount, setContext } from 'svelte'
    import { pageLoading, previousPage } from '$utils/stores'
    import { DURATION } from '$utils/contants'
    import '$utils/polyfills'
    // Components
    import SVGSprite from '$components/SVGSprite.svelte'
    import Switcher from '$components/molecules/Switcher.svelte'
    import Footer from '$components/organisms/Footer.svelte'

    export let data: any
    export let count: any

    // Set global data
    setContext('global', {
        ...data,
        count,
    })


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

    // Define page loading from navigating store
    navigating.subscribe((store: any) => {
        if (store) {
            $pageLoading = true

            // Turn page loading when changing page
            setTimeout(() => {
                $pageLoading = false
            }, DURATION.PAGE_IN * 1.25)
        }
    })

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

<Switcher isOver={!!$page.params.location && !!$page.params.photo} />

<slot />

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

{#if $pageLoading}
    <div class="page-loading" />
{/if}

<SVGSprite />

<script context="module" lang="ts">
    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
    import { fetchAPI } from '$utils/api'

    export async function load ({}: LoadEvent): Promise<LoadOutput> {
        const res = await fetchAPI(`
            query {
                locations: location (filter: { status: { _eq: "published" }}) {
                    id
                    name
                    slug
                    coordinates
                    country {
                        name
                        slug
                        flag { id }
                        continent { slug }
                    }
                    date_updated
                    photos (
                        sort: "-date_created",
                        limit: ${import.meta.env.VITE_PREVIEW_COUNT}
                    ) {
                        image {
                            id
                            title
                        }
                        date_created
                    }
                    has_poster
                    globe_close
                }

                countries: country (filter: { status: { _eq: "published" }}) {
                    id
                    name
                    slug
                    flag { id }
                    locations { id slug }
                }

                continents: continent {
                    name
                    slug
                    rotation
                    countries { id slug }
                }

                settings {
                    seo_name
                    seo_title
                    seo_description
                    description
                    explore_list
                    limit_new
                    instagram
                    footer_links
                    switcher_links
                    newsletter_subtitle
                    newsletter_url
                    newsletter_text
                }

                shop {
                    enabled
                    module_title
                    module_text
                    module_images {
                        directus_files_id {
                            id
                            title
                        }
                    }
                }

                # Count
                countPhotos: photo_aggregated (filter: { status: { _eq: "published" }}) {
                    count { id }
                }
                countLocations: location_aggregated (filter: { status: { _eq: "published" }}) {
                    count { id }
                }
                countCountries: country_aggregated (filter: { status: { _eq: "published" }}) {
                    count { id }
                }
            }
        `)

        const { data } = res
        const filteredContinents = data.continents.filter((cont: any) => cont.countries.length)

        return {
            props: {
                data: {
                    ...data,
                    continents: filteredContinents,
                },
                count: {
                    photos: data.countPhotos[0].count.id,
                    locations: data.countLocations[0].count.id,
                    countries: data.countCountries[0].count.id,
                },
            },
        }
    }
</script>