<style lang="scss">
    @import "../../style/organisms/shop";
</style>

<script lang="ts">
    import { getContext, onMount } from 'svelte'
    // Components
    import Button from '$components/atoms/Button.svelte'
    import Image from '$components/atoms/Image.svelte'

    const { locations, shop }: any = getContext('global')
    const locationsWithPoster = locations
        // Filter locations with posters only
        .filter((loc: Location) => loc.has_poster)
        // Sort locations alphabetically from slug (a>z)
        .sort((a: Location, b: Location) => a.slug.localeCompare(b.slug))
        // Return name only
        .map((loc: Location) => loc.name)

    export let images: any[] = shop.module_images
    export let title: string = shop.module_title
    export let text: string = shop.module_text
    export let textBottom: string = undefined
    export let buttonText = 'Shop'
    export let url = '/shop'
    export let enabled = true

    if (textBottom !== null) {
        textBottom = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.`
    }

    interface Location {
        slug: string
        name: string
        has_poster: boolean
    }

    // Image rotation
    let imagesLoop: ReturnType<typeof setTimeout>
    let currentImageIndex = 0

    const incrementCurrentImageIndex = () => {
        currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
    }

    onMount(() => {
        if (images.length > 1) {
            incrementCurrentImageIndex()
        }

        return () => {
            // Clear rotating words timeout
            if (imagesLoop) {
                clearTimeout(imagesLoop)
            }
        }
    })
</script>

<div class="shop shadow-box-dark" class:has-no-bottom={!textBottom}>
    <div class="content">
        <div class="shop__images">
            {#if images}
            <a href={enabled ? url : undefined} title="Visit our shop" data-sveltekit-noscroll>
                {#each images as { directus_files_id: { id, title } }, index}
                    <Image
                        class={index === currentImageIndex ? 'is-visible' : null}
                        {id}
                        sizeKey="square"
                        sizes={{
                            small: { width: 400, height: 400 },
                            large: { width: 800, height: 800 },
                        }}
                        alt={title}
                    />
                {/each}
            </a>
            {/if}
        </div>

        <div class="shop__content">
            <h2 class="title-medium">{title}</h2>
            <p class="text-small">{text}</p>
            {#if enabled}
                <Button {url} text={buttonText} color="pinklight" />
            {/if}
            {#if textBottom}
                <p class="detail">{textBottom}</p>
            {/if}
        </div>
    </div>
</div>
