<script setup>
const { carts, activeCartId, activeCartItems, isChangingCus, getCarts } = inject("pos");

const { $insertapi, $deleteapi } = useNuxtApp();
const isAddingCart = ref(false);

async function addCart() {
  isAddingCart.value = true;
  const newCart = await $insertapi("Cart", { notify: false });
  activeCartId.value = newCart.id;
  isAddingCart.value = false;
  getCarts();
}

const isDeletingCart = ref();
async function removeCart(cartId) {
  isDeletingCart.value = cartId;

  await $deleteapi(
    "Cart_Item",
    activeCartItems.value.map((c) => c.id),
  );
  await $deleteapi("Cart", cartId);
  isDeletingCart.value = undefined;

  if (cartId === activeCartId.value) {
    if (carts.value.length === 1) {
      activeCartId.value = undefined;
    }
    const deletedCartIndex = carts.value.findIndex((c) => c.id === cartId);

    if (deletedCartIndex === 0) {
      activeCartId.value = carts.value[deletedCartIndex + 1].id;
    } else {
      activeCartId.value = carts.value[deletedCartIndex - 1].id;
    }
  }
  getCarts();
}
</script>

<template>
  <div class="tabs is-boxed mb-0">
    <ul class="is-align-items-stretch">
      <li
        v-for="cart in carts"
        :key="cart.id"
        :class="['is-size-7 w-41', cart.id === activeCartId && 'is-active']"
        @click="activeCartId = cart.id"
        :title="cart.customer__fullname"
      >
        <a class="is-justify-content-start h-full relative">
          <span class="icon mr-0.5">
            <Icon
              :name="
                (cart.id === activeCartId && isChangingCus) || cart.id === isDeletingCart
                  ? 'svg-spinners:180-ring-with-bg'
                  : cart.customer
                    ? 'material-symbols:person-rounded'
                    : 'material-symbols:person-outline-rounded'
              "
              :size="18"
            />
          </span>
          <span
            :style="{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }"
          >
            {{ cart.customer__fullname || "Khách hàng mới" }}
          </span>
          <span
            @click.stop="removeCart(cart.id)"
            class="close ml-auto icon rounded-full"
          >
            <Icon name="material-symbols:close-rounded" />
          </span>
        </a>
      </li>
      <li
        @click="addCart"
        title="Tạo giỏ hàng"
      >
        <a class="new h-full">
          <Icon
            :name="isAddingCart ? 'svg-spinners:180-ring-with-bg' : 'material-symbols:add-rounded'"
            :size="16"
          />
        </a>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.tabs a {
  background-color: hsl(from var(--bulma-tabs-boxed-link-hover-background-color) h s calc(l + 1));
  --bulma-tabs-link-padding: 0.4em 1em 0.4em 0.5em;
  &.new {
    --bulma-tabs-link-padding: 0.4em 0.5em 0.4em 0.5em;
  }
}

.tabs a:hover {
  background-color: hsl(from var(--bulma-tabs-boxed-link-hover-background-color) h s calc(l - 2));
}

.tabs ul {
  border: none;
}

.tabs li.is-active a {
  cursor: initial;
}

.close {
  display: none;
  background-color: var(--bulma-white-ter);
  cursor: pointer;
}
li:hover .close {
  display: flex;
}
.close:hover {
  background-color: var(--bulma-grey-lighter);
}
</style>
