<script setup lang="ts">
import { computed } from 'vue'
import {
  LayoutDashboard,
  Calendar,
  Clock,
  ChevronRight,
} from 'lucide-vue-next'
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 emit = defineEmits<{
  'update:activeTab': [value: string]
}>()

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

<template>
  <Sidebar collapsible="icon" variant="inset">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" as="button" @click="setTab('dashboard')">
            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
              <span class="font-bold text-sm">A</span>
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight">
              <span class="truncate font-semibold">Alpha</span>
              <span class="truncate text-xs">Alpha</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navegación</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              :is-active="activeTab === 'dashboard'"
              :tooltip="'Diagnóstico'"
              @click="setTab('dashboard')"
            >
              <LayoutDashboard />
              <span>Diagnóstico</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton
              :is-active="activeTab === 'calendar'"
              :tooltip="'Calendario'"
              @click="setTab('calendar')"
            >
              <Calendar />
              <span>Calendario</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton
              :is-active="activeTab === 'scheduler'"
              :tooltip="'Recetas'"
              @click="setTab('scheduler')"
            >
              <Clock />
              <span>Recetas</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>

      <NavProjects />
    </SidebarContent>

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