<template>
  <div class="offcanvas__category pb-40">
    <button @click="toggleCategoryActive" class="tp-offcanvas-category-toggle">
      <i class="fa-solid fa-bars"></i>
      Categorías
    </button>
    <div class="tp-category-mobile-menu">
      <nav :class="`tp-category-menu-content ${isCategoryActive ? 'active' : ''}`">
        <ul>
          <li v-for="(item, i) in resourcesStore.categories" :key="i">
            <a class="cursor-pointer">{{ item.name }}</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script setup lang="ts">
import category_data from "@/data/category-data";
import { useResourcesStore } from "@/pinia/resources/resources.store";
const props = defineProps<{ productType: string }>();
const resourcesStore = useResourcesStore();

let isCategoryActive = ref<boolean>(false);

const filterCategories = computed(() => {
  return category_data.filter(
    (c) => c.productType.toLowerCase() === props.productType.toLowerCase()
  );
});

let openCategory = ref<string>("");

const handleOpenSubMenu = (title: string) => {
  if (title === openCategory.value) {
    openCategory.value = "";
  } else {
    openCategory.value = title;
  }
};

const toggleCategoryActive = () => {
  isCategoryActive.value = !isCategoryActive.value;
};
</script>
