<script lang="ts">
    import '../style/style.scss'
    import { setContext } from 'svelte'
    import '$utils/polyfills'
    // Components
    import Footer from '$components/organisms/Footer.svelte'

    export let data: any
    export let count: any

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

<slot />

<Footer />

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

    export async function load ({ page, session, fetch, context }) {
        const res = await fetchAPI(`
            query {
                location {
                    name
                    slug
                    country {
                        name
                        slug
                        flag {
                            id
                        }
                    }
                    date_updated
                    photos (sort: "-date_created", limit: 4) {
                        image {
                            id
                            title
                        }
                    }
                }

                country {
                    name
                    slug
                    flag {
                        id
                    }
                    locations {
                        slug
                    }
                }

                continent {
                    name
                    slug
                    countries {
                        slug
                    }
                }

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

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

        const { data } = res

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