<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
    currentPhotos.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.*,location.*,location.country.*,created_on,modified_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
        }
    }
</script>

<script>
    import { onMount, createEventDispatcher } from 'svelte'
    import { goto } from '@sapper/app'
    import * as fn from '../../../../functions'
    const { page } = stores()
    const dispatch = createEventDispatcher()

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

    // Props
    export let photos

    // Variables
    let windowWidth
    let currentPhoto

    // Define current location
    const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation

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

    // The photo has changed from the carousel
    const photoChanged = event => {
        currentPhoto = event.detail.currentPhoto
        console.log('photoChanged [photo] event: ', currentPhoto.slug)

        // Change the URL to the current photo
        if (!event.detail.init) {
            const windowPathname = window.location.pathname
            const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
            history.pushState('', document.title, newUrl)
        }
    }

    // Access a direct photo or navigate in history
    const photoSlug = $page.params.photo
    // On init, send an event to the Carousel component with the photoSlug to set currentIndex and then change the photo

    // Pop event from browser (prev/next)
    // const changedUrl = event => {
    //     dispatch('changedUrl', {
    //         location: event.target.location
    //     })
    // }


    /*
    !!! TODO:
        - URL navigation on photo change (from Carousel)
        - If coming to direct URL, show the proper photo (i.e currentIndex from photo.slug in URL)
        - Get currentPhoto from Carousel to update title and metas
    */


    /*
    ** Run code on browser only
    */
    onMount(() => {
        /*
        !!! TODO:
            - Change the title with the current photo name and update Metas (with window location url)
        */
        // console.log(currentPhoto)

        dispatch('changeUrl', {
            page: $page
        })
    })
</script>

<svelte:head>
    <title>Houses Of – Photos of {location.name}, {location.country.name}</title>
    <meta name="description" content={location.description}>
    <SocialMetas
        title="Houses Of - Beautiful houses of {location.name}, {location.country.name}"
        description="Houses Of {location.name} {location.description}"
    />
        <!-- url="//{$page.host.split(':3000')[0]}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}" -->
        <!-- image={currentPhoto ? fn.getThumbnail(currentPhoto.image.private_hash, 1200, 630) : null} -->
</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}
        init={$page}
        on:photoChange={photoChanged}
    />
</section>
