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

    // Variables
    let limit

	// Preload data (photos to display)
	export async function preload (page, session) {
        // Fields
        const fields = [
            'id', 'name', 'image.private_hash',
            'location.id', 'location.name', 'location.slug', 'location.country.name'
        ]
        // Random sort
        const sort = '?'
        // Get the limit from API
        site.subscribe(store => limit = store.homepage_photos_limit)

        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&sort=${sort}&limit=${limit}`)
        const photos = await req.json()
		if (req.ok) {
            return { photos: photos.data }
        }
        this.error(404, 'Not found')
	}
</script>

<script>
    import { onMount } from 'svelte'
    import { stores } from '@sapper/app'
    import {
        currentLocation,
        currentPhotos,
        pageReady,
        pageTransition
    } from '../utils/store'
    import { charsToSpan } from '../utils/functions'

    // Dependencies
    import zenscroll from 'zenscroll'

    // Components
    import Button from '../atoms/Button'
    import IconGlobeSmall from '../atoms/IconGlobeSmall'
    import IconGlobe from '../atoms/IconGlobe'
    import InteractiveGlobe from '../molecules/InteractiveGlobe'
    import Carousel from '../organisms/Carousel'
    import Fullscreen from '../organisms/Fullscreen'
    import Locations from '../organisms/Locations'
    import Footer from '../organisms/Footer'
    import SocialMetas from '../utils/SocialMetas'
    import Transition from '../utils/Transition'

    // Animations
    import { animateIn } from '../animations/index'
    pageTransition.onAnimationEnd = animateIn

    // Props and variables
    export let photos
    const { page } = stores()

    // Reset current location if existing
    $: {
        if ($currentLocation) currentLocation.set()
        if ($currentPhotos) currentPhotos.set()
    }


    /*
    ** Run code when mounted
    */
    onMount(() => {
        // Page is loaded
        pageReady.set(true)
    })
</script>

<svelte:head>
	<title>{$site.seo_name} - {$site.seo_title_default} planet Earth</title>
    <meta name="description" content={$site.seo_description_default}>
    <SocialMetas
        url="https://{$page.host}"
        title="{$site.seo_name} - {$site.seo_title_default} planet Earth"
        description={$site.seo_description_default}
        image={$site.seo_share_image.full_url}
    />
</svelte:head>

<section class="intro">
    <div class="anim-mask">
        <div class="anim title-parallax" id="title-houses">
            <h1 class="title-massive" aria-label="Houses">
                {@html charsToSpan('Houses')}
            </h1>
        </div>
    </div>

    <div class="wrap" id="intro-description">
        <div class="intro__description style-description">
            <p>{$site.description}</p>

            <Button type="a" href="#choose" class="button" text="Explore locations">
                <IconGlobeSmall width="22" color="#666" />
            </Button>
        </div>
    </div>

    <div id="intro-carousel">
        <Carousel {photos} />

        <Fullscreen />
    </div>
</section>

<section class="explore explore--homepage">
    <div class="of" id="title-of" aria-label="of">
        <div class="anim-mask">
            {@html charsToSpan('of')}
        </div>
    </div>

    <div class="explore__description style-description" id="choose">
        <p>{$site.explore_globe}</p>
    </div>

    <InteractiveGlobe />

    <div class="anim-mask anim-title">
        <h1 class="title-massive title-parallax" id="title-world" aria-label="World">
            {@html charsToSpan('World')}
        </h1>
    </div>

    <Locations />
</section>

<Footer />
