<script setup lang="ts">
import {
  IconChartBar,
  IconDashboard,
  IconDatabase,
  IconFileAi,
  IconFileDescription,
  IconFolder,
  IconListDetails,
  IconReport,
  IconSettings,
  IconUsers,
} from "@tabler/icons-vue"

import NavDocuments from "@/components/dashboard/NavDocuments.vue"
import NavMain from "@/components/dashboard/NavMain.vue"
import NavSecondary from "@/components/dashboard/NavSecondary.vue"
import NavUser from "@/components/NavUser.vue"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
} from "@/components/ui/sidebar"

defineProps<{
  activeTab?: string
}>()

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

<template>
  <Sidebar collapsible="offcanvas">
    <SidebarHeader>
      <div class="flex items-center gap-2 px-3 py-2">
        <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" class="size-5" stroke="currentColor" fill="currentColor">
          <g transform="matrix(0.24,0,0,0.24,12,12)">
            <g transform="matrix(1,0,0,1,-50,-50)">
              <g transform="matrix(4.166667,0,0,4.166667,0,0)">
                <path d="M5.636,5.636C3.949,7.323 3,9.614 3,12C3,16.937 7.063,21 12,21C14.386,21 16.677,20.051 18.364,18.364C20.051,16.677 21,14.386 21,12C21,7.063 16.937,3 12,3C9.614,3 7.323,3.949 5.636,5.636" style="fill:none;stroke:currentColor;stroke-width:2px;"></path>
              </g>
              <g transform="matrix(0.707818,0,0,0.707818,-34.901465,23.75428)">
                <path d="M136.673,14.297C136.568,17.373 139.093,16.403 139.111,14.264C140.189,12.008 142.848,3.574 148.455,3.204C164.702,2.132 153.11,17.893 147.586,27.552C142.829,35.869 164.837,68.368 155.611,70.821C136.139,75.999 140.766,37.723 135.674,45.662C134.259,47.868 120.815,68.827 113.563,69.827C81.746,74.21 87.352,32.261 103.298,15.327C116.64,1.16 121.972,-3.196 136.673,14.297ZM102.886,48.509C105.694,36.799 105.465,30.363 118.667,17.701C122.298,14.22 124.604,22.307 129.29,27.665C130.639,29.207 107.445,77.368 102.886,48.509Z"></path>
              </g>
            </g>
          </g>
        </svg>
        <span class="text-base font-semibold">Alpha</span>
      </div>
    </SidebarHeader>
    <SidebarContent>
      <NavMain
        :active-tab="activeTab"
        @update:active-tab="emit('update:activeTab', $event)"
      />
      <NavDocuments
        :active-tab="activeTab"
        @update:active-tab="emit('update:activeTab', $event)"
      />
      <NavSecondary :items="[]" class="mt-auto" />
    </SidebarContent>
    <SidebarFooter>
      <NavUser />
    </SidebarFooter>
  </Sidebar>
</template>
