<template>
  <div ref="dropdownRef">
    <div class="relative cursor-pointer" @click="openCart = !openCart">
      <i class="uil uil-shopping-cart text-[31px]"></i>
      <div v-if="checkoutStore.totalNumberOfProducts"
           class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
        {{ checkoutStore.totalNumberOfProducts }}
      </div>
    </div>
    <div v-if="openCart"
         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-[100px] sm:top-[100px] md:top-[140px]"
         @click.self="openCart = !openCart">
      <div class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
        <div v-if="checkoutStore.products && checkoutStore.products.length > 0"
             class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55">
          <div>
            <div v-for="(item, index) in checkoutStore.products" :key="index"
                 class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
              <div class="flex items-center h-[100px] sm:h-[205px]">
                <div class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
                  <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
                       class="max-w-full max-h-full object-contain">
                </div>

                <div class="flex flex-col justify-between min-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-[100px] sm:max-w-[200px] md:max-w-[250px]">
                      {{ item.name }}
                    </h3>
                    <i class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"
                       @click="productStore.deleteCartItem(item.cart_item_id)"></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">
                      {{ menuStore.formatPrice(Number(item.total_price)) }}
                    </p>
                    <div class="flex items-center gap-[2px] sm:gap-2 text-xl">
                      <div
                        class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
                        <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>
                      <div
                        class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
                        {{ item.quantity }}
                      </div>
                      <div
                        class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
                        <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>
          <div class="flex items-center justify-between">
            <h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">
              {{
                $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">
              {{ menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
            </p>
          </div>
          <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true" @click="() => {
            if (userStore.isLogged) {
              menuStore.navigateToItem(menuStore.menuItems?.find((item: any) => item.id === 12))
            }
            else {
              menuStore.navigateToItem(menuStore.menuItems?.find((item: any) => item.id === 11))
            }
            openCart = false
          }">
            {{ userStore.isLogged
              ? $t('to_checkout') : $t('login') }}
          </UiButtonArrow>
        </div>
        <div v-else
             class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center">
          <div
            class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]">
            <h4 class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl">
              {{ $t('empty_cart') }}
            </h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onClickOutside } from '@vueuse/core'

const productStore = useProductStore()
const checkoutStore = useCheckoutStore()
const openCart = ref(false)

const menuStore = useMenuStore()
const userStore = useUserStore()

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