<script setup lang="ts">
const navMenu: {
  heading: string
  items: Array<any>
} = ref({
  heading: 'Menu Utama',
  items: [],
})

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.items = JSON.parse(rawMenu)
}
</script>

<template>
  <Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
    <SidebarHeader>
      <LayoutSidebarNavHeader :teams="teams" />
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup v-if="navMenu.items.length > 0">
        <SidebarGroupLabel>
          {{ navMenu.heading }}
        </SidebarGroupLabel>
        <component
:is="resolveNavItemComponent(item)" v-for="(item, index) in navMenu.items" :key="index" :item="item"
          class="my-2 mb-2"
/>
      </SidebarGroup>
      <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>
