<script setup>
const props = defineProps({
  cartItem: Object,
  deleteable: Boolean,
  invalid: Boolean,
});
const { $deleteapi, $formatNum, $snackbar } = useNuxtApp();
const posStore = usePosStore();
const showConfirmModal = ref();
const isDeleting = ref(false);

function openConfirmModal() {
  showConfirmModal.value = {
    component: "dialog/Confirm",
    width: "500px",
    height: "auto",
    vbind: {
      content: `Bạn xác nhận xoá sản phẩm <b>${props.cartItem.imei__variant__product__name}</b> khỏi giỏ hàng?`,
      onModalevent: removeFromCart,
    },
  };
}

async function removeFromCart() {
  isDeleting.value = true;
  await $deleteapi("Cart_Item", props.cartItem.id);
  isDeleting.value = false;
  $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
  posStore.getCarts();
}
</script>

<template>
  <div
    class="card m-0"
    :style="{
      borderColor: invalid ? 'var(--bulma-danger-70)' : '',
    }"
  >
    <div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
      <div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
        <div class="media m-0">
          <div class="media-left">
            <figure class="image is-48x48">
              <img :src="cartItem.imei__variant__image__path" />
            </figure>
          </div>
          <div class="media-content">
            <p class="font-semibold fs-15">{{ cartItem.imei__variant__product__name }}</p>
            <p class="fs-13 has-text-grey">
              <span>{{ cartItem.imei__variant__ram__code }}</span>
              <span> • </span>
              <span>{{ cartItem.imei__variant__internal_storage__code }}</span>
              <span> • </span>
              <span>{{ cartItem.imei__variant__color__name }}</span>
            </p>
            <p
              v-if="invalid"
              class="is-size-7 has-text-danger-40"
            >
              IMEI sản phẩm
              <span class="tag is-light is-danger fs-11">{{ cartItem.imei__imei }}</span>
              không có sẵn
            </p>
          </div>
        </div>
        <p class="has-text-primary-50 font-medium">
          {{ $formatNum(cartItem.imei__variant__price, { hasUnit: true }) }}
        </p>
      </div>
      <button
        v-if="deleteable || invalid"
        @click="openConfirmModal"
        :class="['button is-danger is-light', isDeleting && 'is-loading']"
      >
        <span class="icon">
          <Icon
            name="material-symbols:delete-outline-rounded"
            :size="18"
          />
        </span>
      </button>
    </div>
    <Modal
      v-if="showConfirmModal"
      v-bind="showConfirmModal"
      @close="showConfirmModal = undefined"
    />
  </div>
</template>
