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

    // Components
    import IconArrow from '../atoms/IconArrow'

    // Props and variables
    export let viewer = false
    export let photos = []
    let hover
    let photoPrev
    let photoNext


    /*
    ** Run code on browser only
    */
    onMount(() => {
        // Hover function
        hover = event => {
            const to = event.currentTarget.dataset.to
            const button = event.currentTarget.querySelector('button')
            const photoActive = document.querySelector('.gallery .active')
            const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
            if (event.type === 'mouseenter') {
                photoToHover.classList.add('hover')
                button.focus()
            } else {
                photoToHover.classList.remove('hover')
                button.blur()
            }
        }

        // Go to previous photo
        photoPrev = () => {
            console.log('previous photo')
        }

        // Go to next photo
        photoNext = () => {
            console.log('next photo')
        }
    })

</script>

<div class="carousel">
    <div class="wrap">
        <div class="gallery">
            <div class="gallery__images">
                {#each photos as photo, index}
                <div class="gallery__images--photo"
                    class:prev={index === 0}
                    class:active={index === 1}
                    class:next={index === 2}
                >
                    <img
                        src="{fn.getThumbnail(photo.image.private_hash, 800)}"
                        srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
                        alt="{photo.name}, {photo.location.name}, {photo.location.country.name}"
                    />
                </div>
                {/each}
            </div>

            <div class="carousel__controls">
                <div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={photoPrev}>
                    <button class="button-control button-control--white dir-left" aria-label="Previous">
                        <IconArrow direction="left" color="#ff6c89" className="icon" />
                        <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
                    </button>
                </div>

                <div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={photoNext}>
                    <button class="button-control button-control--white dir-right" aria-label="Next">
                        <IconArrow direction="right" color="#ff6c89" className="icon" />
                        <IconArrow direction="right" color="#fff" className="icon" hidden="true" />
                    </button>
                </div>
            </div>

            {#if viewer}
            <div class="carousel__number">05</div>
            {/if}
        </div>

        <div class="carousel__information">
            <div class="carousel__information--location style-location">
                <!-- <p class="street">{photos[0].name}</p>
                <p class="style-caps state">{photos[0].location.region}, {photos[0].location.country.name}</p> -->
            </div>
            <!-- <div class="carousel__information--location style-location" aria-hidden="true">
                <p class="street">{photos[1].name}</p>
                <p class="style-caps state">{photos[1].location.region}, {photos[1].location.country.name}</p>
            </div> -->
            {#if viewer}
            <p class="carousel__information--date">Apr 6th, 2019</p>
            {/if}
        </div>

        {#if !viewer}
        <ol class="carousel__dots">
            {#each photos as page, index}
            <li class:active={index === 0}>
                <button></button>
            </li>
            {/each}
        </ol>
        {/if}
    </div>

    {#if viewer}
    <ol class="carousel__dots">
        {#each photos as page}
        <li class:active={false}>
            <button></button>
        </li>
        {/each}
    </ol>
    {/if}
</div>

