<template>
  <div class="tp-product-details-wrapper has-sticky">
    <!-- <div class="tp-product-details-category">
      <span>{{product.parent}}</span>
    </div> -->
    <h3 class="tp-product-details-title">{{ product.name }}</h3>

    <!-- inventory details -->
    <div class="tp-product-details-inventory d-flex align-items-center mb-10">
      <!-- <div class="tp-product-details-stock mb-10">
          <span>{{product.status}}</span>
      </div> -->
      <!-- <div class="tp-product-details-rating-wrapper d-flex align-items-center mb-10">
          <div class="tp-product-details-rating">
            <span><i class="fa-solid fa-star"></i></span>
            <span><i class="fa-solid fa-star"></i></span>
            <span><i class="fa-solid fa-star"></i></span>
            <span><i class="fa-solid fa-star"></i></span>
            <span><i class="fa-solid fa-star"></i></span>
          </div>
          <div class="tp-product-details-reviews">
            <span>({{product.reviews?.length}} Reviews)</span>
          </div>
      </div> -->
    </div>
    <div v-html="props.product.description"></div>

    <!-- price -->
    <div class="tp-product-details-price-wrapper mb-20">
      <!-- <div v-if="product.discount > 0">
          <span class="tp-product-details-price old-price">${{ product.price }}</span>
          <span class="tp-product-details-price new-price">
            ${{(Number(product.price) - (Number(product.price) * Number(product.discount)) / 100).toFixed(2)}}
          </span>
        </div> -->
      <!-- <span v-else class="tp-product-details-price old-price">${{ product.price }}</span> -->
      <span class="tp-product-details-price old-price">${{ product.price }}</span>
    </div>

    <!-- product countdown start -->
    <!-- <div v-if="product.offerDate?.endDate">
    <product-details-countdown :product="product"/>
  </div> -->
    <!-- product countdown end -->

    <!-- actions -->
    <div class="tp-product-details-action-wrapper">
      <h3 class="tp-product-details-action-title" v-if="product.type_id == 2">Cantidad</h3>
      <div class="tp-product-details-action-item-wrapper d-flex align-items-center">
        <div class="tp-product-details-quantity" v-if="product.type_id == 2">
          <div class="tp-product-quantity mb-15 mr-15">
            <span class="tp-cart-minus" @click="cartStore.decrement">
              <svg-minus />
            </span>
            <input class="tp-cart-input" type="text" :value="cartStore.order_quantity" disabled>
            <span class="tp-cart-plus" @click="cartStore.increment">
              <svg-plus-sm />
            </span>
          </div>
        </div>
        <div class="tp-product-details-add-to-cart mb-15 w-100">
          <button v-if="product.exist_in_cart" :disabled="product.exist_in_cart" type="button" class="exist_in_cart btn fw-semibold py-2 w-100">El
            producto ya existe en el carrito</button>
          <button v-if="!product.exist_in_cart" type="button" class="tp-product-details-add-to-cart-btn btn w-100"
            @click="addToCart(product.id)">Agregar a carrito</button>
        </div>
      </div>
      <nuxt-link :href="`/product-details/${product.id}`"
        class="tp-product-details-buy-now-btn btn py-2 w-100 text-center">Comprar ahora</nuxt-link>
    </div>
    <div class="tp-product-details-action-sm">
      <!-- <button @click="compareStore.add_compare_product(product)" type="button" class="tp-product-details-action-sm-btn">
          <svg-compare-3/>
          Compare
      </button> -->
      <button @click="wishlistStore.add_wishlist_product(product)" type="button"
        class="tp-product-details-action-sm-btn">
        <svg-wishlist-3 />
        Agregar a favoritos
      </button>
    </div>

    <div v-if="isShowBottom">
      <div class="tp-product-details-query">
        <!-- <div class="tp-product-details-query-item d-flex align-items-center">
          <span>SKU:  </span>
          <p>{{product.sku}}</p>
      </div> -->
        <!-- <div class="tp-product-details-query-item d-flex align-items-center">
          <span>Category:  </span>
          <p>{{product.parent}}</p>
      </div> -->
        <!-- <div class="tp-product-details-query-item d-flex align-items-center">
          <span>Tag: </span>
          <p>Android</p>
        </div> -->
      </div>
      <div class="tp-product-details-social">
        <span>Share: </span>
        <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
        <a href="#"><i class="fa-brands fa-twitter"></i></a>
        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
        <a href="#"><i class="fa-brands fa-vimeo-v"></i></a>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { useCartStore } from '@/pinia/cart/cart.store';
import type { ProductInterface } from '@/pinia/products/interfaces/products.interface';
import { useWishlistStore } from '@/pinia/useWishlistStore';
import { toast } from 'vue3-toastify';

// store
const wishlistStore = useWishlistStore();
const cartStore = useCartStore();
// props
const props = withDefaults(defineProps<{ product: ProductInterface; isShowBottom?: boolean }>(), {
  isShowBottom: true,
})

const addToCart = async (product_id: number) => {
  const added = await cartStore.addCartProduct({ product_id });

  if (added.added) {
    props.product.exist_in_cart = true;
    toast.success('El producto se ha agregado correctamente', { position: 'bottom-center' });
  } else {
    if (added.message) {
      toast.error(added.message, { position: 'bottom-center' });
    } else {
      toast.error('El producto no se pudo agregar correctamente', { position: 'bottom-center' });
    }
  }
}

</script>

<style scoped lang="scss">
.exist_in_cart {
  background: #ccc;
  border: 1px solid #ccc;
}
</style>