<!-- LayoutNavigationDrawer.vue -->
<template>
  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
    <v-list>
      <v-list-item>
        <v-list-item-title class="text-h6 text-white">
          {{ props.title || APP_NAME }}
        </v-list-item-title>
      </v-list-item>

      <slot name="action" />

      <!-- NAVIGATION ITEMS -->
      <v-tooltip
        v-for="(item, index) in props.navigationItems"
        :key="`${item.title}-${index}`"
        location="right"
        :disabled="!item.disabled"
      >
        <template #activator="{ props: tooltipProps }">
          <div v-bind="tooltipProps">
            <NavigationItem
              :title="item.title"
              :icon="item.icon"
              :route="item.route"
              :children="item.children"
              :link="item.link"
              :class="{
                'opacity-50 pointer-events-none': item.disabled,
              }"
              @click="() => handleClick(item)"
            />
          </div>
        </template>

        <span>Please complete onboarding first</span>
      </v-tooltip>

      <!-- SERVICES SLOT -->
      <slot name="services" />
    </v-list>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
const props = defineProps({
  navigationItems: { type: Array, required: true },
  title: { type: String, default: "" },
});

const emit = defineEmits(["navigate"]);

const { drawer } = useLocal();
const { APP_NAME } = useRuntimeConfig().public;

const handleClick = (item: any) => {
  if (item.disabled) return;
  emit("navigate", item);
};
</script>
