<template>
  <div class="tp-header-category tp-category-menu tp-header-category-toggle">
    <button @click="handleActive" class="tp-category-menu-btn tp-category-menu-toggle">
      <span>
        <SvgDropdown />
      </span>
      Categorías
    </button>
    <Transition>
      <nav v-if="isActive" class="tp-category-menu-content">
        <ul class="tp-submenu">
          <li v-for="(item, i) in resourcesStore.categories" :key="i">
            <NuxtLink :to="'/search?category='+item.name" class="cursor-pointer">{{ item.name }}</NuxtLink>
          </li>
          <li v-if="resourcesStore.total_categoríes > 5">
            <NuxtLink :to="'#'">Todas las categorías</NuxtLink>
          </li>
        </ul>
      </nav>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import category_data from "@/data/category-data";
import { useResourcesStore } from '@/pinia/resources/resources.store';
const router = useRouter();

const resourcesStore = useResourcesStore();

let isActive = ref<boolean>(false);
// handle active
const handleActive = () => isActive.value = !isActive.value;

// handle parent
// const handleParentCategory = (value: string) => {
//   const newCategory = value.toLowerCase().replace("&", "").split(" ").join("-");
//   router.push(`/shop?category=${newCategory}`);
// }

// handle parent
// const handleSubCategory = (value: string) => {
//   const newCategory = value.toLowerCase().replace("&", "").split(" ").join("-");
//   router.push(`/shop?subCategory=${newCategory}`);
// }

</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
