<script>
    import { onMount } from 'svelte'
    import { site, currentLocation } from '../utils/store'
    import { getThumbnail, formatDate } from '../utils/functions'

    // Animations
    import { animateIn } from '../animations/Photo'

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

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

    // Reactive variables for location informations
    const location = photo.location
    const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}`
    const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`

    // Photo index
    const photoIndex = (index < 10 ? '0': '') + index


    /*
    ** Run code when mounted
    */
    onMount(() => {
        animateIn(scope)
    })
</script>

<div class="photo" bind:this={scope}>
    <div class="photo__location wrap">
        <div class="wrapper">
            <h2 class="title-location">
                <span>{photo.name.split(', ')[0]},</span>
                <span>{photo.name.split(', ')[1]}</span>
            </h2>
            <p class="style-caps">{location.region}, {location.country.name}</p>
        </div>
    </div>

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

                    {:else}
                    <source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}>
                    <source media="(min-width: 768px)" srcset={getThumbnail(photo.image.private_hash, 992)}>
                    <source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 650)}>
                    <source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
                    <img src="{getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
                    {/if}
                </picture>
            </a>
            <time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
                {formatDate(photo.date, 'FULL')}
            </time>
            <div class="photo__number">
                <span id="photo_number">{photoIndex}</span>
            </div>
        </div>
    </div>
</div>
