<script context="module">
	import { api, site, continents, countries, locations, currentLocation } from '../store'

	export async function preload (page, segment) {
		const res = await this.fetch(api.graphql, {
			method: 'post',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ query: `{
				site {
					data {
						description
						explore_globe
						explore_list
						instagram
					}
				}
				continents {
					data {
						id
						name
					}
				}
				countries {
					data {
						id
						name
						slug
						continent { id name }
						flag {
							full_url
							title
						}
					}
				}
				locations (filter: { status_eq: "published" }) {
					data {
						id
						name
						slug
						region
						country {
							name slug
							flag {
								full_url
								title
							}
							continent { id name }
						}
						description
					}
				}
			}`})
		})
		const data = await res.json()

		// Set data into store
		continents.set(data.data.continents.data)
		countries.set(data.data.countries.data)
		locations.set(data.data.locations.data)
		site.set(data.data.site.data[0])
	}
</script>

<script>
	// Dependencies
	import '../../node_modules/bulma/css/bulma.min.css'
	import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'

	// Components
	import Footer from '../parts/Footer.svelte'

	// Manipulate continents data
	$countries.forEach(country => {
		const continent = $continents.find(c => c.id === country.continent.id)
		continent.countries = []
		if (!continent.countries.includes(country)) {
			continent.countries.push(country)
		}
	})
</script>

<svelte:head>
	<title>Houses Of - Beautiful houses of planet Earth</title>
</svelte:head>

<slot></slot>

<Footer />
