<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
import { useForm } from '@inertiajs/vue3'
import Logo from '@/components/common/Logo.vue'
import { useAuth } from '@/composables/useAuth'

const { user } = useAuth()

const logoutForm = useForm({})

function logout() {
  logoutForm.post('/logout')
}

const sidebarLinks = [
  {
    label: 'Dashboard',
    icon: 'i-lucide-house',
    to: '/dashboard',
  },
]

const userMenuItems: DropdownMenuItem[][] = [
  [
    {
      label: 'Profile',
      icon: 'i-lucide-user-round',
      to: '/profile',
    },
  ],
  [
    {
      label: 'Sign out',
      icon: 'i-lucide-log-out',
      color: 'error',
      onSelect: logout,
    },
  ],
]
</script>

<template>
  <UApp>
    <UDashboardGroup unit="rem" storage="local">
      <UDashboardSidebar
        id="main"
        resizable
        collapsible
        class="bg-elevated/25"
        :min-size="14"
        :default-size="16"
        :max-size="24"
        :collapsed-size="4"
        :ui="{ footer: 'lg:border-t lg:border-default' }"
      >
        <template #header="{ collapsed }">
          <Logo
            :link-to-home="false"
            size="sm"
            :show-text="!collapsed"
          />
        </template>

        <template #default="{ collapsed }">
          <UNavigationMenu
            :items="sidebarLinks"
            orientation="vertical"
            :collapsed="collapsed"
            tooltip
          />
        </template>

        <template #footer="{ collapsed }">
          <UDropdownMenu
            :items="userMenuItems"
            :content="{ align: 'center', side: 'top', sideOffset: 8, collisionPadding: 12 }"
            :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
          >
            <UButton
              :avatar="{ alt: user?.full_name }"
              :label="collapsed ? undefined : user?.full_name"
              :trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
              color="neutral"
              variant="ghost"
              block
              :square="collapsed"
              class="data-[state=open]:bg-elevated"
              aria-label="Open user menu"
              :loading="logoutForm.processing"
              :ui="{
                label: 'truncate text-left',
                trailingIcon: 'text-dimmed',
              }"
            />
          </UDropdownMenu>
        </template>
      </UDashboardSidebar>

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