<template>
    <div ref="dropdownRef">
        <i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
        <div v-if="openCart" class="max-w-[1067px] w-full absolute top-[130px] z-50 right-20">
            <div
                class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full space-y-[55px]">
                <div class="pb-[25px] border-b border-block" v-if="productStore.productList">
                    <div class="flex items-center h-[205px]">
                        <div class="w-[205px] h-full flex items-center justify-center">
                            <img :src="`https://www.yourgold.cz/api/public/file/${productStore.productList[0]?.cover_picture_uuid}.webp`"
                                alt="pics" class="w-auto h-full" />
                        </div>
                        <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]"
                            @click="productStore.addToCart(productStore.productList[0])">
                            <h3
                                class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark max-w-[250px]">
                                {{ productStore.productList[0]?.name }}
                            </h3>
                            <div class="flex flex-col gap-[10px]">
                                <p
                                    class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                                    {{ productStore.productList[0]?.formatted_price }}
                                </p>
                                <div class="flex items-center gap-4 text-xl">
                                    <p class="cursor-pointer">-</p>
                                    <div class="w-11 min-h-11 border border-button flex items-center justify-center">{{
                                        count }}
                                    </div>
                                    <p>+</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <h4 class="h4-uppercase-bold-inter">Celková částka</h4>
                    <p
                        class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                        {{ productStore.productList[0]?.formatted_price }}
                    </p>
                </div>
                <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true">Přejít k pokladně</UiButtonArrow>
            </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>