<script setup lang="ts">
const navMenu: any[] = [
  {
    heading: 'Menu Utama',
    items: [
      {
        title: 'Dashboard',
        icon: 'i-lucide-home',
        link: '/',
      },
      {
        title: 'Pasien',
        icon: 'i-lucide-users',
        link: '/patient',
      },
      {
        title: 'Rehabilitasi Medik',
        icon: 'i-lucide-heart',
        link: '/rehabilitasi',
      },
      {
        title: 'Rawat Jalan',
        icon: 'i-lucide-stethoscope',
        link: '/rawat-jalan',
      },
      {
        title: 'Rawat Inap',
        icon: 'i-lucide-building-2',
        link: '/rawat-inap',
      },
      {
        title: 'VClaim BPJS',
        icon: 'i-lucide-refresh-cw',
        link: '/vclaim',
        badge: 'Live',
      },
      {
        title: 'SATUSEHAT',
        icon: 'i-lucide-database',
        link: '/satusehat',
        badge: 'FHIR',
      },
      {
        title: 'Medical Records',
        icon: 'i-lucide-file-text',
        link: '/medical-records',
      },
      {
        title: 'Laporan',
        icon: 'i-lucide-clipboard-list',
        link: '/laporan',
      },
      {
        title: 'Monitoring',
        icon: 'i-lucide-bar-chart-3',
        link: '/monitoring',
      },
    ],
  },
]

const navMenuBottom: any[] = [
  {
    title: 'Help & Support',
    icon: 'i-lucide-circle-help',
    link: 'https://github.com/simrs/simrs-fe',
  },
]

function resolveNavItemComponent(item: any): any {
  if ('children' in item) return resolveComponent('LayoutSidebarNavGroup')

  return resolveComponent('LayoutSidebarNavLink')
}

const teams: {
  name: string
  logo: string
  plan: string
}[] = [
  {
    name: 'SIMRS - RSSA',
    logo: '/rssa-logo.png',
    plan: 'Saiful Anwar Hospital',
  },
]

// const user: {
//   name: string
//   email: string
//   avatar: string
// } = {
//   name: '',
//   email: '',
//   avatar: '/',
// }

// const { sidebar } = useAppSettings()
const sidebar = {
  collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
  side: 'left', // 'left' | 'right'
  variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
}
</script>

<template>
  <Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
    <SidebarHeader>
      <LayoutSidebarNavHeader :teams="teams" />
      <Search />
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup v-for="(nav, indexGroup) in navMenu" :key="indexGroup">
        <SidebarGroupLabel v-if="nav.heading">
          {{ nav.heading }}
        </SidebarGroupLabel>
        <component
          :is="resolveNavItemComponent(item)"
          v-for="(item, index) in nav.items"
          :key="index"
          :item="item"
          class="mb-2"
        />
      </SidebarGroup>
      <SidebarGroup class="mt-auto">
        <component
          :is="resolveNavItemComponent(item)"
          v-for="(item, index) in navMenuBottom"
          :key="index"
          :item="item"
          size="sm"
        />
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <LayoutSidebarNavFooter />
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
</template>

<style scoped></style>
