<style lang="scss">
    @import "../../style/molecules/cart-item";
</style>

<script lang="ts">
    import { createEventDispatcher } from 'svelte'
    // Components
    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
    import Select from '$components/molecules/Select.svelte'

    export let item: any

    const dispatch = createEventDispatcher()
    const quantityLimit = 5


    // When changing item quantity
    const updateQuantity = ({ detail }: any) => {
        dispatch('updatedQuantity', {
            id: item.id,
            quantity: Number(detail)
        })
    }

    // When removing item
    const removeItem = () => {
        dispatch('removed', item.id)
    }
</script>

<div class="cart-item shadow-small">
    <div class="cart-item__left">
        <img src={item.product.images[0].file.url} width={200} height={300} alt={item.product.name}>
    </div>
    <div class="cart-item__right">
        <h3>Poster</h3>
        <p>
            {item.product.name}
            <br>– {item.price}€
        </p>

        {#if item && item.quantity}
            <Select
                name="sort" id="filter_sort"
                options={[...Array(item.quantity <= quantityLimit ? quantityLimit : item.quantity)].map((_, index) => {
                    return {
                        value: `${index + 1}`,
                        name: `${index + 1}`,
                        default: index === 0,
                        selected: index + 1 === item.quantity,
                    }
                })}
                on:change={updateQuantity}
                value={String(item.quantity)}
            >
                <span>Quantity:</span>
            </Select>
        {/if}

        <ButtonCircle class="remove"
            size="tiny" color="gray"
            on:click={removeItem}
        >
            <svg width="8" height="8">
                <use xlink:href="#cross" />
            </svg>
        </ButtonCircle>
    </div>
</div>