<template>
  <UDashboardGroup>
    <UDashboardSearch />

    <UDashboardSidebar
      v-model:open="open"
      collapsible
      resizable
      class="bg-(--ui-bg-elevated)/25"
      :ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
    >
      <template #header>
        <NuxtLink to="/">
          <img src="../public/favicon.ico" alt="Logo" />
        </NuxtLink>
      </template>

      <template #default="{ collapsed }">
        <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-(--ui-border)" />

        <UNavigationMenu :collapsed="collapsed" :items="links[0]" orientation="vertical" />

        <UNavigationMenu :collapsed="collapsed" :items="links[1]" orientation="vertical" class="mt-auto" />
      </template>

      <template #footer="{ collapsed }">
        <UserMenu :collapsed="collapsed" />
      </template>
    </UDashboardSidebar>

    <slot />

    <NotificationsSlideover v-model="isNotificationsSlideoverOpen" />
  </UDashboardGroup>
</template>

<script setup lang="ts">
const links = [[], []]
const open = ref(false)

const isNotificationsSlideoverOpen = ref(false)
const { unreadCount, fetchUnreadCount, startPeriodicRefresh } = useNotification()

onMounted(async () => {
  await fetchUnreadCount()
  startPeriodicRefresh()
})

provide('notificationState', {
  isNotificationsSlideoverOpen,
  unreadCount
})
</script>
