<script context="module">
    import { stores } from '@sapper/app'
    import {
        apiEndpoints,
        locations,
        currentLocation,
        currentPhotos
    } from '../../../../store'

    // Define either to preload data or use the store
    let preloaded
    currentLocation.subscribe(store => preloaded = store ? store : undefined)

    // Preload data
    export async function preload (page, session) {
        // Load the photos if not loaded
        if (!preloaded) {
            const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
            const photos = await req.json()
            return {
                photos: photos.data
            }
        }
        // Use the store otherwise
        else return {
            photos: preloaded.photos
        }
    }
</script>

<script>
    import { onMount } from 'svelte'
    import * as fn from '../../../../functions'

    // Dependencies
    import dayjs from 'dayjs'
    import advancedFormat from 'dayjs/plugin/advancedFormat'
    dayjs.extend(advancedFormat)

    // Components
    import IconGlobe from '../../../../atoms/IconGlobe'
    import IconCross from '../../../../atoms/IconCross'
    import Carousel from '../../../../organisms/Carousel'

    // Props and variables
    const { page } = stores()
    export let photos
    let currentIndex
    let indexFormated
    let viewerPhotos
    let windowWidth
    let changeWindowWidth

    // Define current location
    const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
    const locationFull = `${location.name}, ${location.country.name}`

    // Update store current location informations
    if (!$currentLocation) currentLocation.set(location)
    if (!$currentPhotos) currentPhotos.set(photos)

    // Define path
    const path = `/viewer/${location.country.slug}/${location.slug}/`


    /*
    ** Run code on browser only
    */
    onMount(() => {

    })
</script>

<svelte:head>
    <title>Houses Of - photoName photoCountryName</title>
</svelte:head>

<svelte:window bind:innerWidth={windowWidth} />

<section class="viewer">
    <div class="viewer__top">
        <p class="tip">Tap for fullscreen</p>

        <div class="buttons">
            <a href="/choose" class="button-control button-control--dashed">
                <IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
                <svg>
                    <circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
                </svg>
            </a>
            <a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
                <IconCross color="#fff" width="18" class="icon" />
                <IconCross color="#fff" width="18" class="icon" hidden="true" />
            </a>
        </div>
    </div>

    <Carousel {photos} viewer={true} />
</section>
