<template>
  <div class="header-cart-list">
    <h3>{{ $t("itemsSubmittedInCart", { count: cart.count }) }}</h3>
    <div>
      <ul>
        <li v-for="(item, i) in items" :key="i">
          <AppDesktopHeaderCartItem
            :id="item._id"
            :index="i"
            @remove="remove"
          />
        </li>
      </ul>
    </div>
    <Button
      :disabled="cart.count < 1"
      :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 token = useCookie("token");

const show = () => {
  popup.value.hide();
  if (token.value) router.push("/checkout/cart");
  else router.push("/auth/login?redirect=/checkout/cart");
};
const remove = async (data) => {
  await cart.update(data);
  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-primary-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-primary-600 border-primary-600 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>
