<script>
    import { onMount } from 'svelte'
    import { fly } from 'svelte/transition'
    import { quartOut } from 'svelte/easing'
    import { site, currentLocation } from '../store'
    import * as fn from '../functions'

    // Dependencies
    import * as basicScroll from 'basicscroll'
    import dayjs from 'dayjs'
    import advancedFormat from 'dayjs/plugin/advancedFormat'
    dayjs.extend(advancedFormat)

    // Props and variables
    export let index
    export let photo
    export let layout = 'list'
    let photoElement

    // Default size for the image
    const defaultWidth = 900
    const defaultHeight = Math.ceil(defaultWidth / 1.5)

    // Reactive variables for location informations
    $: location = $currentLocation
    $: imgAlt = !!location ? `${photo.name}, ${location.region}, ${location.country.name}` : 'Loading…'
    $: photoHref = !!location ? `/viewer/${location.country.slug}/${location.slug}/${photo.slug}` : '#'


    /*
	** Run code on browser only
	*/
	onMount(() => {
        // Parallax on photo when image has been loaded
        const parallaxNumber = basicScroll.default.create({
            elem: photoElement.querySelector('.photo__image--number'),
            direct: photoElement,
            from: 'top-bottom',
            to: 'bottom-top',
            props: {
                '--translate': {
                    from: '-75%',
                    to: '-25%'
                }
            }
        })
        parallaxNumber.start()
        parallaxNumber.calculate()
        parallaxNumber.update()
    })
</script>

<div class="photo"
    bind:this={photoElement}
    transition:fly="{{ y: 40, duration: 1000, easing: quartOut }}"
>
    <div class="photo__location wrap">
        <div class="wrapper">
            <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
            <p class="style-caps">{!!location && location.region}, {!!location && location.country.name}</p>
        </div>
    </div>

    <div class="photo__image wrap">
        <div class="align">
            <a href={photoHref}>
                <picture class="photo__image--img">
                    {#if layout === 'list'}
                    <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
                    <source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
                    <source media="(min-width: 500px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
                    <source media="(min-width: 300px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
                        data-src="{fn.getThumbnail(photo.image.private_hash, 900)}"
                        width={defaultWidth} height={defaultHeight}
                        alt={imgAlt}
                        class="lazyload"
                        data-aos="scale-down-fade-in" data-aos-once="true">

                    {:else}
                    <source media="(min-width: 992px)" srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
                    <source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
                    <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
                    <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
                    {/if}
                </picture>
            </a>
            <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
                {dayjs(photo.date).format('MMM Do, YYYY')}
            </time>
            <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
        </div>
    </div>
</div>
