<template>
    <div ref="dropdownRef">
        <i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
        <div class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[140px]">
            <div v-if="openCart" class="xl:w-[55%] md:w-[70%] w-full px-4 md:px-0">
                <div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
                    class="w-full p-[25px] sm:p-[50px] first:pt-0 bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-full space-y-[55px]">
                    <div>
                        <!-- product -->
                        <div v-for="item in productStore.cart.cart_items" class="py-[25px] border-b border-block">
                            <div class="flex items-center max-h-[205px]">
                                <div class="min-w-[100px] sm:w-[205px] flex items-center justify-center">
                                    <!-- <img :src="`https://www.yourgold.cz/api/public/file/${item.picture_uuid}.webp`"
                                        alt="pics" class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" /> -->
                                </div>
                                <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px">

                                    <div class="w-full flex items-center justify-between">
                                        <h3
                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[250px]">
                                            {{ item.name }}
                                        </h3>
                                        <i @click="productStore.deleteCartItem(item.cart_item_id)"
                                            class="uil uil-trash-alt text-2xl cursor-pointer"></i>
                                    </div>
                                    <div class="flex flex-col gap-[10px]">
                                        <p
                                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                                            {{ item.total_price }}
                                        </p>
                                        <div class="flex items-center gap-4 text-xl">
                                            <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
                                                @click="productStore.decrementCartItem(item.cart_item_id)"></i>
                                            <div
                                                class="w-11 min-h-11 border border-button flex items-center justify-center rounded-[4px]">
                                                {{ item.quantity }}
                                            </div>
                                            <i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
                                                @click="productStore.incrementCartItem(item.product_id)"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <h4 class="h4-uppercase-bold-inter">{{ $t('total_amount') }}</h4>
                        <p
                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                            {{ productStore.cart.total_value }}
                        </p>
                    </div>
                    <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">{{ $t('to_checkout') }}
                    </UiButtonArrow>
                </div>
                <div v-else
                    class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-[400px] flex items-center justify-center">
                    <div
                        class="border border-block inline-flex items-center justify-center w-[30%] h-[200px] rounded-[8px]">
                        <h4 class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-xl">
                            košík je prázdný</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onClickOutside } from "@vueuse/core";
const count = ref(1)
const productStore = useProductStore()
const openCart = ref(false);

const dropdownRef = ref(null);
onClickOutside(dropdownRef, () => {
    openCart.value = false
});
</script>