<template>
  <div class="offcanvas__category pb-40">
    <button
        :class="isCategoryActive ? 'active' : ''"
        class="tp-offcanvas-category-toggle"
        @click="toggleCategoryActive"
    >
      <i class="fa-solid fa-bars"></i>
			<span>{{ $t('All Categories') }}</span>
    </button>

    <div class="tp-category-mobile-menu">
      <nav :class="`tp-category-menu-content ${isCategoryActive ? 'active' : ''}`">
        <ul :class="isCategoryActive ? 'active' : ''">
          <li v-for="(item, i) in categories" :key="item?.id || i" class="has-dropdown">
            <a
                :class="openCategory === decodeURIComponent(item.url) ? 'expanded' : ''"
                :href="item.url || '#'"
                class="pointer"
                @click.prevent.stop="handleClickSubMenu($event, item)"
            >
              <span v-if="item.img">
                <img :src="item.img" alt="category image" style="width: 50px; height: 50px; object-fit: contain" />
              </span>
              <span>{{ toolsService.parseCategoryName(item) }}</span>
              <button
                  v-if="(item?.children?.length || 0) > 0"
                  :class="openCategory === decodeURIComponent(item.url) ? 'dropdown-opened' : ''"
                  class="dropdown-toggle-btn"
                  @click.prevent.stop.self="handleOpenSubMenu($event, item)"
              >
                <i class="fa-regular fa-angle-right" @click.prevent.stop.self="handleOpenSubMenu($event, item)"></i>
              </button>
            </a>

            <ul
                v-if="(item?.children?.length || 0) > 0"
                :class="`tp-submenu pe-3 ${openCategory === decodeURIComponent(item.url) ? 'active' : ''}`"
            >
              <li v-for="(child, i) in item.children as ICategory[]" :key="child?.id || i">
                <a
                    :href="child.url || '#'"
                    class="pointer"
                    @click.prevent.stop="handleClickSubMenu($event, child)"
                >{{ toolsService.parseCategoryName(child) }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script lang="ts" setup>
import toolsService from "@/services/toolsService";
import type {ICategory} from "@/types/category-d-t";
import {useUtilityStore} from "@/pinia/useUtilityStore";

const router = useRouter();
const utilsStore = useUtilityStore();
const loading = useLoading();
let openCategory = ref<string>(decodeURIComponent(router.currentRoute.value.fullPath) || "");
let isCategoryActive = ref<boolean>(false);

const props = defineProps<{
  categories?: ICategory[],
}>();

const handleOpenSubMenu = (event: any, item: ICategory) => {
  let title: string = decodeURIComponent(item.url);
  if (title === openCategory.value) {
    openCategory.value = "";
  } else {
    openCategory.value = title;
  }
};

const handleClickSubMenu = (event: any, item: ICategory) => {
  // if (router.currentRoute.value?.fullPath === item?.url) {
  //   if (item?.children?.length) {
  //     return handleOpenSubMenu(event, item);
  //   }
  //
  //   return false;
  // }
  loading.start();
  handleOpenSubMenu(event, item);
  router.push(item.url).then(()=>{
    loading.stop()
  });
  // utilsStore.handleOpenMobileMenu();
};

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

watch(
    () => router.currentRoute.value,
    () => {
      // utilsStore.closeOpenMobileMenu();
    }
)
</script>

