<script setup lang="ts">
import {
  LayoutDashboard,
  Calendar,
  Clock,
  ChevronRight,
} from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from '@/components/ui/sidebar'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import NavProjects from './NavProjects.vue'
import NavUser from './NavUser.vue'

defineProps<{
  activeTab: string
}>()

const { t } = useI18n()

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

function setTab(tab: string) {
  emit('update:activeTab', tab)
}
</script>

<template>
  <Sidebar collapsible="icon" variant="inset">
    <SidebarHeader class="px-4 pt-5 pb-3">
      <img src="/Alpha.svg" alt="Alpha" class="h-10 w-auto dark:invert" />
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>{{ t('sidebar.navigation') }}</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              :is-active="activeTab === 'dashboard'"
              :tooltip="t('sidebar.diagnosis')"
              @click="setTab('dashboard')"
            >
              <LayoutDashboard />
              <span>{{ t('sidebar.diagnosis') }}</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton
              :is-active="activeTab === 'calendar'"
              :tooltip="t('sidebar.calendar')"
              @click="setTab('calendar')"
            >
              <Calendar />
              <span>{{ t('sidebar.calendar') }}</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton
              :is-active="activeTab === 'scheduler'"
              :tooltip="t('sidebar.scheduler')"
              @click="setTab('scheduler')"
            >
              <Clock />
              <span>{{ t('sidebar.scheduler') }}</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>

      <NavProjects />
    </SidebarContent>

    <SidebarFooter>
      <NavUser />
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
</template>
