<script context="module">
    import { apiEndpoints } from 'utils/store'

    export async function preload (page, session) {
        const req = await this.fetch(apiEndpoints.gql, {
            method: 'post',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ query: `{
                site {
                    data {
                        description
                        explore_globe
                        explore_list
                        homepage_photos_limit
                        photos_per_page
                        instagram
                        seo_name
                        seo_title_default
                        seo_description_default
                        seo_share_image { full_url }
                        credits_text
                        credits_list
                    }
                }
                continents {
                    data {
                        id
                        name
                    }
                }
                countries {
                    data {
                        id
                        name
                        slug
                        flag { full_url title }
                        continent { id }
                    }
                }
                locations (filter: { status_eq: "published" }) {
                    data {
                        id
                        name
                        slug
                        region
                        country { id }
                        description
                        coordinates
                        illustration_desktop { full_url }
                        illustration_mobile { full_url }
                    }
                }
            }`})
        })
        const result = await req.json()
        if (req.ok) {
            // Set data into store
            site.set(result.data.site.data[0])
            continents.set(result.data.continents.data)
            countries.set(result.data.countries.data)
            locations.set(result.data.locations.data)
        }
    }
</script>

<script>
    import { onMount } from 'svelte'
    import { stores } from '@sapper/app'
    import {
        site,
        continents,
        countries,
        locations,
        pageReady
    } from 'utils/store'
    const { page } = stores()

    // Components
    import AnalyticsTracker from 'utils/AnalyticsTracker'


    /*
    ** Manipulate data
    */
    // Replace each countrie's continent by the database
    $countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))

    // Push each country to its continent
    $countries.forEach(country => {
        const continent = $continents.find(cont => cont.id === country.continent.id)
        continent.countries = []
        if (!continent.countries.includes(country)) {
            continent.countries.push(country)
        }
    })

    // Replace each location's country by the database
    $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
</script>

<style lang="scss" global>
    @import "../style/style.scss";
</style>

<svelte:head>
    <link rel="canonical" href={`https://${$page.host}${$page.path}`} />
</svelte:head>

<main class="housesof"
    class:is-transitioning={!$pageReady}
    in:fade={{ duration: 600 }}
    out:fade={{ duration: 600 }}
>
    <slot></slot>
</main>

<AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />
