<style lang="scss" src="./CartItem.scss"></style>

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

    let {
        item,
        quantityLimit = 5,
        onUpdatedQuantity,
        onremoved,
    }: {
        item: any
        quantityLimit?: number
        onUpdatedQuantity?: any
        onremoved?: any
    } = $props()

    /** Handle item quantity change */
    const updateQuantity = (value: string) => {
        onUpdatedQuantity({
            id: item.id,
            quantity: Number(value)
        })
    }
</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,
                    }
                })}
                onchange={updateQuantity}
                value={String(item.quantity)}
            >
                <span>Quantity:</span>
            </Select>
        {/if}

        <ButtonCircle
            class="remove"
            size="tiny" color="gray"
            onclick={() => onremoved(item.id)}
        >
            <svg width="8" height="8">
                <use xlink:href="#cross" />
            </svg>
        </ButtonCircle>
    </div>
</div>
