<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const toast = useToast()

const open = ref(false)

const links = [[
  {
    label: 'Home',
    icon: 'i-lucide-home',
    to: '/',
    onSelect: () => {
      open.value = false
    }
  },
  {
    label: 'My Reading',
    icon: 'i-lucide-history',
    defaultOpen: true,
    children: [
      {
        label: 'History',
        to: '/myreading/history',
        onSelect: () => {
          open.value = false
        }
      },
      {
        label: 'Library',
        to: '/myreading/library',
        onSelect: () => {
          open.value = false
        }
      },
      {
        label: 'Updates',
        to: '/myreading/updates',
        onSelect: () => {
          open.value = false
        }
      }
    ]
  },
  {
    label: 'Titles',
    icon: 'i-lucide-book',
    defaultOpen: true,
    children: [
      {
        label: 'Advanced Search',
        to: '/titles/search',
        // icon: 'i-lucide-search',
        onSelect: () => {
          open.value = false
        }
      },
      {
        label: 'Recently Added',
        to: '/titles/recently-added',
        // icon: 'i-lucide-clock',
        onSelect: () => {
          open.value = false
        }
      },
      {
        label: 'Latest Updates',
        to: '/titles/latest',
        // icon: 'i-lucide-refresh-cw',
        onSelect: () => {
          open.value = false
        }
      },
      {
        label: 'Random',
        to: '/titles/random',
        // icon: 'i-lucide-shuffle',
        onSelect: () => {
          open.value = false
        }
      }
    ]
  }
]] satisfies NavigationMenuItem[][]

const groups = computed(() => [{
  id: 'main',
  items: links.flat()
}])

onMounted(async () => {
  const cookie = useCookie('cookie-consent')
  if (cookie.value === 'accepted') {
    return
  }

  toast.add({
    title: 'We use first-party cookies to enhance your experience on our website.',
    duration: 0,
    close: false,
    actions: [{
      label: 'Accept',
      color: 'neutral',
      variant: 'outline',
      onClick: () => {
        cookie.value = 'accepted'
      }
    }, {
      label: 'Opt out',
      color: 'neutral',
      variant: 'ghost'
    }]
  })
})
</script>

<template>
  <UDashboardGroup unit="rem">
    <UDashboardSidebar
      id="default"
      v-model:open="open"
      collapsible
      resizable
      class="bg-elevated/25"
      :ui="{ footer: 'lg:border-t lg:border-default' }"
    >
      <template #header="{ collapsed }">
        <AppLogo :collapsed="collapsed" />
      </template>

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

        <UNavigationMenu
          :collapsed="collapsed"
          :items="links"
          orientation="vertical"
          tooltip
          popover
        />

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

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

    <UDashboardSearch :groups="groups" />

    <slot />
  </UDashboardGroup>
</template>
