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

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

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

    // Props
    export let photos
    export let viewer = false
    export let init = undefined

    // Variables
    let hover
    let currentIndex = 0
    $: currentPhoto = photos[currentIndex] || null
    $: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
    $: nextPhoto = photos[currentIndex + 1] || photos[0]


    /*
    ** Navigate to a photo
    */
   // Go to specific photo on Init
    if (init) {
        currentIndex = photos.findIndex(photo => photo.slug === init.params.photo)
    }

    // Send current photo to event
    const sendCurrentPhoto = ({ init = false }) => {
        console.log('sendCurrentPhoto event: ', currentPhoto.slug)
        dispatch('photoChange', {
            currentPhoto: currentPhoto,
            init
        })
    }

    // Change the current index depending on direction
    const goToPhoto = direction => {
        if (direction === 'prev') {
            currentIndex--
            currentIndex = (currentIndex < 0) ? photos.length - 1 : currentIndex
        } else if (direction === 'next') {
            currentIndex++
            currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
        }

        // Send current photo to event
        sendCurrentPhoto({ init: false })
    }


    /*
    ** Drag and touch navigation
    */
    let touchStartX = 0
    let touchStartY = 0
    let touchEndX = 0
    let touchEndY = 0

    const swipeStart = event => {
        touchStartX = event.changedTouches[0].screenX
        touchStartY = event.changedTouches[0].screenY
    }
    const swipeEnd = event => {
        touchEndX = event.changedTouches[0].screenX
        touchEndY = event.changedTouches[0].screenY
        if (touchEndX <= touchStartX) goToPhoto('prev')
        if (touchEndX >= touchStartX) goToPhoto('next')
    }


    /*
    ** Keyboard navigation
    */
    const keyboardNav = event => {
        if ([37,80,74].includes(event.keyCode)) {
            goToPhoto('prev')
        } else if ([39,78,75].includes(event.keyCode)) {
            goToPhoto('next')
        }
    }


    /*
    ** Run code on browser only
    */
    onMount(() => {
        // Hover function
        hover = event => {
            const button = event.currentTarget.querySelector('button')
            const photoActive = document.querySelector('.gallery__photo--active')

            let photoToHover
            if (event.currentTarget.dataset.to === 'prev') {
                photoToHover = (photoActive.previousSibling != null) ? photoActive.previousSibling : photoActive.parentNode.lastChild
            } else {
                photoToHover = (photoActive.nextSibling != null) ? photoActive.nextSibling : photoActive.parentNode.firstChild
            }

            // Toggle class and focus of the button
            if (event.type === 'mouseenter') {
                photoToHover.classList.add('hover')
                button.focus()
            } else if (event.type === 'mouseleave') {
                photoToHover.classList.remove('hover')
                button.blur()
            }
        }

        // Send current photo to event for init
        sendCurrentPhoto({ init: true })
    })




    /*
        TODO: REVEAL ANIMATION ON CAROUSEL
        Fix the CSS priority? Cancel the transition delay and duration?
        data-aos="{
            (photo === prevPhoto) ? 'carousel-prev' :
            (photo === currentPhoto) ? 'carousel-active' :
            (photo === nextPhoto) ? 'carousel-next' : ''
        }
    */
</script>

<svelte:window on:keydown={keyboardNav} />

<div class="carousel"
    on:touchstart={swipeStart}
    on:touchend={swipeEnd}
>
    <div class="wrap">
        <div class="gallery">
            <div class="gallery__images">
                {#each photos as photo, index}
                <picture class="gallery__photo"
                    class:gallery__photo--prev={photo === prevPhoto}
                    class:gallery__photo--active={photo === currentPhoto}
                    class:gallery__photo--next={photo === nextPhoto}
                >
                    <source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
                    <source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
                    <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 600)}>
                    <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {photo.location.name}, {photo.location.country.name}">
                </picture>
                {/each}
            </div>

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

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

            {#if viewer}
            <div class="carousel__number">
                {currentIndex < 10 ? 0 : ''}{photos.length - currentIndex}
            </div>
            {/if}
        </div>

        <div class="carousel__infos">
            <div class="carousel__locations">
                {#each photos as photo, index}
                <div class="carousel__location style-location"
                    class:carousel__location--prev={photo === prevPhoto}
                    class:carousel__location--active={photo === currentPhoto}
                    class:carousel__location--next={photo === nextPhoto}
                >
                    <p class="street">{photo.name}</p>
                    <p class="state style-caps style-caps--transparent">
                        {photo.location.name}, {photo.location.country.name}
                    </p>
                </div>
                {/each}
            </div>
            {#if viewer}
            <p class="carousel__date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
            {/if}
        </div>

        {#if !viewer}
        <ol class="carousel__dots">
            {#each photos as page, index}
            <li class:active={page === currentPhoto} on:click={() => currentIndex = index}>
                <button aria-label="Go to photo #{index + 1}"></button>
            </li>
            {/each}
        </ol>
        {/if}
    </div>

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