<script lang="ts" setup>
definePageMeta({
  layout: 'blank',
  public: true,
})

const route = useRoute()
const contentFrame = computed(() => route.meta.contentFrame)
const contentContent = computed(() => {
  switch (contentFrame.value) {
    case 'cf-container-lg':
      return 'cf-frame cf-container-lg-content'
    case 'cf-container-md':
      return 'cf-frame cf-container-md-content'
    case 'cf-container-sm':
      return 'cf-frame cf-container-sm-content'
    case 'cf-full-width':
      return 'cf-frame-width'
    default:
      return 'cf-frame'
  }
})

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 navMenu = ref({
  heading: 'Main Menu',
  items: [
    {
      title: 'Test User List',
      icon: 'i-lucide-user',
      component: defineAsyncComponent(() => import('~/pages/_dev/user/list.vue')),
    },
    {
      title: 'Test Medicine List',
      icon: 'i-lucide-user',
      component: defineAsyncComponent(() => import('~/components/flow/medicine-method/list.vue')),
    },
  ],
})

const activeComponent = ref<any>(null)

function selectComponent(item: any) {
  activeComponent.value = item.component
}
</script>

<template>
  <SidebarProvider>
    <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>
          <button
            v-for="(item, index) in navMenu.items"
            :key="index"
            class="my-2 mb-2 flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
            @click="selectComponent(item)"
          >
            <i :class="item.icon"></i>
            {{ item.title }}
          </button>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <LayoutSidebarNavFooter />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>

    <SidebarInset>
      <LayoutHeader />
      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
        <div v-if="activeComponent">
          <component :is="activeComponent" />
        </div>
        <div v-else class="text-gray-500">Playground untuk testing component</div>
      </div>
    </SidebarInset>
  </SidebarProvider>
</template>
