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

	// Preload data
	export async function preload (page, session) {
        // Load random photos
        const limit = 5
		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&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 { site, currentLocation, currentPhotos } from '../store'
    import * as fn from '../functions'

    // Dependencies
    import * as basicScroll from 'basicscroll'
    import AOS from 'aos'

    // 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 Locations from '../organisms/Locations'
    import Footer from '../organisms/Footer'
    import SocialMetas from '../utils/SocialMetas'

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

    // Props and variables
    export let photos
    let appearing


    /*
    ** Run code on browser only
    */
    onMount(() => {
        if (process.browser) {
            // Scroll apparitions
            AOS.init()

            // Parallax titles
            const titleHouses = document.getElementById('title-houses')
            const scrollTitleHouses = basicScroll.default.create({
                elem: titleHouses,
                direct: titleHouses,
                from: 0,
                to: window.innerHeight * 0.6,
                props: {
                    '--translateX': {
                        from: '-3%',
                        to: '-20%'
                    }
                }
            }).start()

            const titleWorld = document.getElementById('title-world')
            const scrollTitleWorld = basicScroll.default.create({
                elem: titleWorld,
                direct: titleWorld,
                from: document.querySelector('.explore__description').getBoundingClientRect().top,
                to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
                props: {
                    '--translateX': {
                        from: '4%',
                        to: '-4%'
                    }
                }
            }).start()
        }
    })
</script>

<svelte:head>
	<title>Houses Of - {$site.seo_title_default} planet Earth</title>
    <meta name="description" content={$site.seo_description_default}>
    <SocialMetas
        url="https://housesof.world"
        title="Houses Of - {$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" data-aos="letters-translate-top" data-aos-once="true">
            <h1 class="title-massive" aria-label="Houses">
                {@html fn.lettersToSpan('Houses')}
            </h1>
        </div>
    </div>

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

            <Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
                <IconGlobeSmall width="22" color="#666" />
            </Button>
        </div>
    </div>

    <Carousel {photos} />
</section>

<section class="explore explore--homepage">
    <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
        <div class="anim-mask">
            {@html fn.lettersToSpan('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" data-aos="letters-translate-bottom" data-aos-once="true">
            {@html fn.lettersToSpan('World')}
        </h1>
    </div>

    <Locations />
</section>

<Footer />
