<template>
  <div v-if="isCartBtnShow" class="fixed right-2 bottom-30 z-50 opacity-90">
    <div class="indicator">
      <span class="indicator-item indicator-top indicator-start badge badge-secondary">{{ cart.productsCount }}</span>
      <button class="btn btn-primary btn-xl btn-circle" @click="openCart">
        <span v-if="cart.isLoading" class="loading loading-spinner"></span>
        <template v-else>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
          </svg>
        </template>
      </button>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted} from "vue";
import {useCartStore} from "@/stores/CartStore.js";
import {useRoute, useRouter} from "vue-router";
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";

const cart = useCartStore();
const router = useRouter();
const route = useRoute();
const haptic = useHapticFeedback();

const isCartBtnShow = computed(() => {
  return route.name === 'product.show';
});


function openCart() {
  haptic.selectionChanged();
  router.push({name: 'cart'});
}

onMounted(async () => {
  await cart.getProducts();
});
</script>



<style scoped>

</style>