<script setup lang="ts">
import { ref, shallowRef } from "vue";
import { useCustomizerStore } from "~/store/customizer";
import sidebarItems from "./sidebarItem";
import Logo from "../logo/Logo.vue";
import { Icon } from "@iconify/vue";
import { useRoute } from "vue-router";
// MiniSidebar Icons
import MiniSideIcons from "./MinIconItems";

const route = useRoute();

const findTitleByPath = (items: any, path: any) => {
  let title = "";

  for (const item of items) {
    if (item.to === path) {
      title = item.id;
      break;
    } else if (item.children) {
      for (const child of item.children) {
        if (child.to === path) {
          title = item.id;
          break;
        } else if (child.children) {
          for (const grandChild of child.children) {
            if (grandChild.to === path) {
              title = item.id;
              break;
            }
          }
        }
      }
    }
  }

  return title;
};
const foundId = findTitleByPath(sidebarItems, route.path);
const getCurrent = foundId ? foundId : 1;
const currentMenu = ref<any>(getCurrent);
function showData(data: any) {
  currentMenu.value = data;
  //customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
}

// MiniSidebar Icons End
const customizer = useCustomizerStore();
const sidebarMenu = shallowRef(sidebarItems);
</script>

<template>
  <!-- Minisidebar Icons -->
  

  <!-- LeftSidebar Items -->
  <v-navigation-drawer
    v-model="customizer.Sidebar_drawer"
    elevation="0"
    rail-width="1"
    app
    top="0"
    class="leftSidebar"
    :rail="customizer.mini_sidebar"
    width="240"
  >
    <!---Logo part -->
    <div class="pa-4 pb-0">
      <Logo />
    </div>

    <!-- ---------------------------------------------- -->
    <!---Navigation -->
    <!-- ---------------------------------------------- -->
    <perfect-scrollbar class="scrollnavbar">
      <div class="px-4 py-0 sidebar-menus">
        <v-list class="py-1">
          <template v-for="(item, i) in sidebarMenu">
            <template v-if="currentMenu == item.id">
              <!---Item Sub Header -->
              <LazyLayoutFullVerticalSidebarNavGroup
                :item="item"
                v-if="item.header"
                :key="item.title"
              />
              <!---If Has Child -->
              <template v-for="sItem in item.children">
                <LazyLayoutFullVerticalSidebarNavCollapse
                  class="leftPadding"
                  :item="sItem"
                  :level="0"
                  v-if="sItem.children"
                />
                <LazyLayoutFullVerticalSidebarNavItem
                  :item="sItem"
                  class="leftPadding"
                  v-else
                />
              </template>
            </template>
          </template>
        </v-list>
      </div>
    </perfect-scrollbar>
  </v-navigation-drawer>
</template>
