<script lang="ts">
    import { capitalizeFirstLetter } from '$utils/functions'
    // Components
    import Button from '$components/atoms/Button.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Carousel from '$components/organisms/Carousel.svelte'

    export let product: any


    /**
     * Preview photos specs
     */
    let lastPreviewPhoto: any = undefined
    $: if (product.photos_preview.length) {
        lastPreviewPhoto = product.photos_preview[product.photos_preview.length - 1].directus_files_id
    }
    const photosPreview = [
        {
            sizes: {
                small: { width: 275 },
                medium: { width: 500 },
                large: { width: 800 },
            },
            ratio: 0.75,
        },
        {
            sizes: {
                small: { width: 200 },
                medium: { width: 300 },
                large: { width: 400 },
            },
            ratio: 0.8,
        },
        {
            sizes: {
                small: { width: 200 },
                medium: { width: 300 },
                large: { width: 400 },
            },
            ratio: 1.28,
        },
        {
            sizes: {
                small: { width: 450 },
                medium: { width: 700 },
                large: { width: 1000 },
            },
            ratio: 0.68,
        },
    ]
</script>

<section class="poster-layout grid">
    <h2 class="title-huge">
        {product.location.name}
    </h2>

    <aside class="poster-layout__buy">
        <div class="poster-layout__info">
            <dl>
                <dt>{capitalizeFirstLetter(product.type)}</dt>
                <dd>{product.name} – 30€</dd>
            </dl>
            <Button
                text="Add to cart"
                color="pink"
            />
        </div>

        <Carousel
            class="shadow-box-dark"
            slides={product.photos_product.map(({ directus_files_id }) => ({
                id: directus_files_id.id,
                alt: directus_files_id.title,
            }))}
        />
    </aside>

    {#if product.photos_preview.length}
        <div class="poster-layout__images grid container">
            {#each product.photos_preview.slice(0, product.photos_preview.length - 1) as { directus_files_id}, index}
                <Image
                    class="image image--{index + 1} photo shadow-box-light"
                    id={directus_files_id.id}
                    sizeKey="photo-list"
                    sizes={photosPreview[index].sizes}
                    ratio={photosPreview[index].ratio}
                    alt={directus_files_id.title}
                />
            {/each}
        </div>
    {/if}

    <div class="poster-layout__about grid">
        <div class="text container">
            {#if product.description}
                <p>{product.description}</p>
            {/if}
            {#if product.details}
                <p class="details">{product.details}</p>
            {/if}
        </div>
    </div>

    {#if lastPreviewPhoto}
        <Image
            class="image image--4 photo shadow-box-light"
            id={lastPreviewPhoto.id}
            sizeKey="photo-grid"
            sizes={photosPreview[photosPreview.length - 1].sizes}
            ratio={photosPreview[photosPreview.length - 1].ratio}
            alt={lastPreviewPhoto.title}
        />
    {/if}
</section>