<script>
import { computed, defineComponent } from "vue";

import IconCart from "components/icons/IconCart.vue";
import IconHamburger from "components/icons/IconHamburger.vue";

import { storeToRefs } from "pinia";
import { useCartStore } from "src/stores/cart";
import { useMobileStore } from "stores/mobileNav";

export default defineComponent({
  name: "user-area",
  components: {
    IconCart,
    IconHamburger,
  },
  setup() {
    const cartStore = useCartStore();
    const { cart } = storeToRefs(cartStore);

    const mobileStore = useMobileStore();
    const { handleOpenMobileNav } = mobileStore;

    const currentLength = computed(() => cart.value.length);

    return { handleOpenMobileNav, currentLength };
  },
});
</script>

<template>
  <div class="user-area">
    <!-- <dropdown-group class="user-area-lang" label="Idioma">
      <dropdown-item current-lang="en"> EN </dropdown-item>
      <dropdown-item current-lang="pt"> PT </dropdown-item>
      <dropdown-item current-lang="es"> ES </dropdown-item>
    </dropdown-group>
    <RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink> -->

    <RouterLink
      class="user-area-link cart"
      to="/checkout"
      v-if="currentLength > 0"
    >
      <icon-cart />
      <span class="cart-count" :class="currentLength > 0 && 'active'">
        {{ currentLength }}
      </span>
    </RouterLink>

    <q-btn
      class="user-area-hamburg"
      @click="handleOpenMobileNav"
      size="sm"
      color="white"
      flat
      round
    >
      <IconHamburger />
    </q-btn>
  </div>
</template>

<style lang="scss" scoped>
.user-area {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 190px;
  justify-content: flex-end;

  & .user-area-link {
    color: $white;
    &.user,
    &.cart {
      display: inline-flex;
      position: relative;
      width: 20px;
      height: 14px;
      & .cart-count {
        position: absolute;
        top: -7px;
        right: -6px;
        width: 14px;
        height: 14px;
        display: grid;
        place-items: center;
        background-color: $primary-light;
        color: $primary;
        font-size: $font-10;
        font-family: $font-questrial;
        border-radius: 50%;
        padding: 2px;
        transition: 200ms ease-in;
        transform: scale(0);
        opacity: 0;
        visibility: hidden;
        &.active {
          transform: scale(1);
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }

  & .user-area-hamburg {
    display: none;
  }

  @media only screen and (max-width: $med-md) {
    gap: 27px;
    min-width: auto;

    & .user-area-link {
      &.help {
        display: none;
      }
    }

    & .user-area-hamburg {
      display: grid;
      place-content: center;
    }

    & .user-area-lang {
      display: none;
    }
  }
}
</style>
