<script setup lang="ts">
const navMenu = ref([])

const teams: {
  name: string
  logo: string
  plan: string
}[] = [
  {
    name: 'SIMRS - RSSA',
    logo: '/rssa-logo.png',
    plan: 'Saiful Anwar Hospital',
  },
]
const sidebar = {
  collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
  side: 'left', // 'left' | 'right'
  variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
}
const navMenuBottom: any[] = [
  {
    title: 'Help & Support',
    icon: 'i-lucide-circle-help',
    link: 'https://github.com/simrs/simrs-fe',
  },
]

onMounted(async () => {
  await setMenu()
})

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

  return resolveComponent('LayoutSidebarNavLink')
}

async function setMenu() {
  const position_code = 'sys'
  const res = await fetch(`/side-menu-items/${position_code}.json`)
  const rawMenu = await res.text()
  navMenu.value = JSON.parse(rawMenu)
}
</script>

<template>
  <Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
    <SidebarHeader>
      <LayoutSidebarNavHeader :teams="teams" />
    </SidebarHeader>
    <SidebarContent>
      <template v-if="navMenu.length > 0">
        <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="my-1 mb-1"
          />
        </SidebarGroup>
      </template>
      <template v-else>
        <div class="p-5">
          <div v-for="n in 10" :key="n" class="my-4 h-8 animate-pulse rounded bg-gray-200 py-2"></div>
        </div>
      </template>
      <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>
