<template>
  <div :class="`cartmini__area tp-all-font-roboto ${cartStore.cart_off_canvas ? 'cartmini-opened' : ''
    }`">
    <div class="cartmini__wrapper d-flex justify-content-between flex-column">
      <div class="cartmini__top-wrapper">
        <div class="cartmini__top p-relative">
          <div class="cartmini__top-title">
            <h4>Carrito de compras</h4>
          </div>
          <div class="cartmini__close">
            <button @click="cartStore.handleCartOffcanvas" type="button" class="cartmini__close-btn cartmini-close-btn">
              <i class="fal fa-times"></i>
            </button>
          </div>
        </div>
        <div v-if="cartStore.cart_products && cartStore.cart_products.items.length > 0" class="cartmini__widget">
          <div v-for="item in cartStore.cart_products.items" :key="item.id" class="cartmini__widget-item">
            <div class="cartmini__thumb">
              <nuxt-link :href="`/product-details/${item.id}`">
                <img :src="item.photos[0].small_size_url" alt="cart-img" width="70" height="60" />
              </nuxt-link>
            </div>
            <div class="cartmini__content">
              <h5 class="cartmini__title">
                <nuxt-link :href="`/product-details/${item.id}`">
                  {{ item.name }}
                </nuxt-link>
              </h5>
              <div class="cartmini__price-wrapper">
                <span class="cartmini__price" v-if="item.discount > 0 && item.quantity">
                  ${{
                    (
                      (Number(item.price) -
                        (Number(item.price) * Number(item.discount)) / 100) *
                      item.quantity
                    ).toFixed(2)
                  }}
                </span>
                <span v-else class="cartmini__price">
                  ${{ item.quantity && (item.price * item.quantity).toFixed(2) }}
                </span>
                <span class="cartmini__quantity">{{ " " }}x{{ item.quantity }}</span>
              </div>
            </div>
            <a
              @click="removeItemFromCart(item.item_id)"
              class="cartmini__del cursor-pointer">
              <i class="fa-regular fa-xmark"></i>
            </a>
          </div>
        </div>
        <!-- if no item in cart  -->
        <div v-if="cartStore.cart_products && cartStore.cart_products.items.length == 0" class="cartmini__empty text-center">
          <img src="/img/product/cartmini/empty-cart.png" alt="empty-cart-img" />
          <p>Tu carrito de compras está vacio</p>
          <nuxt-link href="/" class="tp-btn">Ir a comprar</nuxt-link>
        </div>
      </div>
      <div v-if="cartStore.cart_products && cartStore.cart_products.items.length > 0" class="cartmini__checkout">
        <div class="cartmini__checkout-title mb-30">
          <h4>Subtotal:</h4>
          <span>${{ cartStore.cart_products.price.toFixed(2) }}</span>
        </div>
        <div class="cartmini__checkout-btn">
          <nuxt-link href="/cart" @click="cartStore.handleCartOffcanvas" class="tp-btn mb-10 w-100">
            Ver carrito
          </nuxt-link>
          <a href="/checkout" @click="cartStore.handleCartOffcanvas" class="tp-btn tp-btn-border w-100">
            Comprar ahora
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- overlay start  -->
  <div @click="cartStore.handleCartOffcanvas" :class="`body-overlay ${cartStore.cart_off_canvas ? 'opened' : ''}`">
  </div>
  <!-- overlay end  -->
</template>

<script setup lang="ts">
import { useCartStore } from '@/pinia/cart/cart.store';
import { toast } from 'vue3-toastify';
const cartStore = useCartStore();

const removeItemFromCart = async (item_id: number) => {
  const removed = await cartStore.removeCartItem(item_id);

  if(removed) {
    await cartStore.getCart();
    toast.success('El producto se ha quitado correctamente', { position: 'bottom-center' });
  } else {
    toast.error('El producto no pudo ser eliminado', { position: 'bottom-center' });

  }
}

</script>
