<script setup lang="ts">
import type { Component } from "vue"
import { useI18n } from "vue-i18n"
import {
  IconDatabase,
  IconFileDescription,
  IconFileWord,
  IconFolder,
  IconReport,
} from "@tabler/icons-vue"

import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

const { t } = useI18n()

const documentItems = [
  { name: 'nav.documents', icon: IconFolder, id: 'documents' },
  { name: 'nav.dataLibrary', icon: IconDatabase, id: 'data-library' },
  { name: 'nav.reports', icon: IconReport, id: 'reports' },
  { name: 'nav.wordAssistant', icon: IconFileWord, id: 'word-assistant' },
  { name: 'nav.templates', icon: IconFileDescription, id: 'templates' },
]

defineProps<{
  activeTab?: string
}>()

const emit = defineEmits<{
  'update:activeTab': [value: string]
}>()
</script>

<template>
  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
    <SidebarGroupLabel>{{ t('nav.documents') }}</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem v-for="item in documentItems" :key="item.id">
        <SidebarMenuButton
          :is-active="activeTab === item.id"
          @click="emit('update:activeTab', item.id)"
        >
          <component :is="item.icon" />
          <span>{{ t(item.name) }}</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</template>
