<script lang="ts">
    import '../style/style.scss'
    import { setContext } from 'svelte'
    import '$utils/polyfills'
    // Components
    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,
    })
</script>

<Switcher />

<slot />

<Footer />

<script context="module" lang="ts">
    import { fetchAPI } from '$utils/api'

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

                countries: country (filter: { status: { _eq: "published" }}) {
                    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
                    newsletter_subtitle
                    newsletter_url
                    newsletter_text
                }

                shop {
                    module_title
                    module_text
                    module_image {
                        id
                        title
                    }
                }

                # Count
                photo_aggregated {
                    count { id }
                }
                location_aggregated {
                    count { id }
                }
                country_aggregated {
                    count { id }
                }
            }
        `)

        const { data } = res

        // Filter continents with linked countries
        const filteredContinents = data.continent.filter((cont: any) => cont.countries.length)

        return {
            props: {
                data: {
                    ...data,
                    continents: filteredContinents,
                },
                count: {
                    photos: data.photo_aggregated[0].count.id,
                    locations: data.location_aggregated[0].count.id,
                    countries: data.country_aggregated[0].count.id,
                },
            }
        }
    }
</script>