<script lang="ts">
    import { fade } from "svelte/transition"

    import { getGalleries } from "../../api"
    import { apiBaseURL } from "../../config"

    import Modal from "./Modal.svelte"

    export let article
    let galleries: Gallery[]

    const loadLinkedGalleries = async () => {
        galleries = await getGalleries(article?.galleries)
    }
    loadLinkedGalleries()

    let selectedImage = null
    let selectedGallery = null
    const showDetails = (gallery, image) => {
        selectedImage = image
        selectedGallery = gallery
        console.log(selectedGallery.items.indexOf(image))
    }
    const closeDetails = () => {
        selectedImage = null
        selectedGallery = null
    }

    const next = () => {
        let nextImage
        let nextIndex = selectedGallery.items.indexOf(selectedImage) + 1
        if (!selectedGallery.items[nextIndex]) {
            nextImage = selectedGallery.items[0]
        } else {
            nextImage = selectedGallery.items[nextIndex]
        }
        selectedImage = nextImage
    }

    const prev = () => {
        let prevImage
        let prevIndex = selectedGallery.items.indexOf(selectedImage) - 1
        if (prevIndex < 0) {
            prevImage = selectedGallery.items[selectedGallery.items.length - 1]
        } else {
            prevImage = selectedGallery.items[prevIndex]
        }
        selectedImage = prevImage
    }

    const handleKeydown = (e) => {
        if (e.keyCode === 37) {
            prev()
        }
        if (e.keyCode === 39) {
            next()
        }
    }
</script>

<svelte:window on:keydown="{handleKeydown}" />

<section class="galleries">
    {#each galleries || [] as gallery}
        <div class="gallery gallery-{gallery.variant}">
            {#each gallery.items || [] as image, index}
                <div
                    class="gallery-item"
                    on:click="{() => showDetails(gallery, image)}"
                >
                    <img
                        src="{apiBaseURL}galleries/{gallery.id}/{image.file
                            .src}?filter=s"
                        alt="{image.alt ? image.alt : image.title}"
                    />
                    {#if gallery.variant === "simple-with-title"}
                        <div class="gallery-item-title">
                            {image.title}
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    {/each}

    {#if selectedGallery && selectedImage}
        <Modal show="{selectedGallery && selectedImage}">
            <div transition:fade class="gallery-image-details">
                <img
                    src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
                        .file.src}?filter=l"
                    alt="{selectedImage.alt
                        ? selectedImage.alt
                        : selectedImage.title}"
                    on:click="{closeDetails}"
                />
                <div class="gallery-info">
                    {#if selectedImage.title}
                        <div class="gallery-title">
                            {selectedImage.title}
                        </div>
                    {/if}
                    {#if selectedImage.description}
                        <div class="gallery-description">
                            {selectedImage.description}
                        </div>
                    {/if}
                </div>
                <div class="prev" on:click|preventDefault="{prev}">&#8249;</div>
                <div class="next" on:click|preventDefault="{next}">&#8250;</div>
            </div>
        </Modal>
    {/if}
</section>
