<template>
  <v-list-group v-if="children && children.length">
    <template #activator="{ props: groupProps }">
      <v-list-item
        v-bind="groupProps"
        :prepend-icon="icon"
        class="text-subtitle-2"
        @click.stop="onParentClick"
      >
        {{ title }}
      </v-list-item>
    </template>

    <NavigationItem
      v-for="(child, childIndex) in children"
      :key="`${child.title}-${childIndex}`"
      :title="child.title"
      :icon="child.icon"
      :route="child.route"
      :children="child.children"
    />
  </v-list-group>

  <v-list-item
    v-else-if="props.route && props.route.name"
    :prepend-icon="icon"
    :to="props.route"
    class="text-subtitle-2"
  >
    {{ title }}
  </v-list-item>

  <v-list-item
    v-else-if="props.link"
    :prepend-icon="icon"
    :href="props.link"
    class="text-subtitle-2"
  >
    {{ title }}
  </v-list-item>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: "Title",
  },
  icon: {
    type: String,
    required: false,
    default: "",
  },
  route: {
    type: Object as PropType<Record<string, any>>,
    default() {
      return { name: "" };
    },
  },
  link: {
    type: String,
    required: false,
    default: "",
  },
  children: {
    type: Array<TNavigationItem>,
    required: false,
    default: () => [],
  },
  name: {
    type: String,
    required: false,
    default: "",
  },
});

function onParentClick() {
  if (props.route && props.route.name) {
    navigateTo(props.route);
  }
}
</script>
