<template>
    <div class="header-cart-list">
        <h3>{{ $t('itemsSubmittedInCart', { count: cart.count }) }}</h3>
        <div>
            <ul>
                <li v-for="({ product, quantity }, i) in items" :key="i">
                    <AppDesktopHeaderCartItem :data="product" :quantity="quantity" @remove="remove" />
                </li>
            </ul>
        </div>
        <Button :label="$t('showCart')" @click="show()" />
    </div>
</template>

<script setup>
const { popup } = inject('service')
const cart = useCartStore()
const items = computed(() => cart.items)

const emit = defineEmits(['hide'])
const router = useRouter()

const show = () => {
    popup.value.hide()
    router.push('/checkout/cart')
}
const remove = async (id) => {
    await cart.update(id)
    if (cart.count < 1) popup.value.hide()
}
</script>

<style lang="scss">
.header-cart-list {
    box-shadow: 0px 2px 10px 0px rgba(0, 75, 130, 0.16);
    @apply rtl w-[30.9rem] h-[40.6rem] flex flex-col gap-5 py-6 pl-2 bg-white rounded-2xl border overflow-hidden relative;

    &>h3 {
        @apply text-sky-700 text-[0.9em] font-medium font-vazir mb-2.5 mr-8 ml-6;
    }

    &>div {
        @apply overflow-y-auto h-[29.8rem];

        ul {
            @apply w-full flex py-3 pr-8 pl-4 flex-col gap-3 items-center;
        }

        &::-webkit-scrollbar {
            @apply hidden;
        }
    }

    &>button {
        @apply bg-sky-700 border-sky-700 mr-8 ml-6 text-xl font-bold font-vazir #{!important};
    }

    &::before {
        content: ' ';
        box-shadow: 0px -3px 16px 0px rgba(7, 50, 115, 0.16);
        @apply absolute inset-x-0 -bottom-3 h-28 z-0;
    }
}
</style>
