<script setup lang="ts">
import { useSidebar } from '~/components/pub/ui/sidebar'

// defineProps<{
//   user: {
//     name: string
//     email: string
//     avatar: string
//   }
// }>()

const { isMobile } = useSidebar()
const { logout } = useUserStore()
const userStore = useUserStore().user

function handleLogout() {
  navigateTo('/auth/login')
  logout()
}

const showModalTheme = ref(false)
</script>

<template>
  <ClientOnly>
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <SidebarMenuButton
              size="lg"
              class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <Avatar class="h-8 w-8 rounded-lg">
                <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
                <AvatarFallback class="rounded-lg">
                  {{
                    userStore?.user_name
                      ?.split(' ')
                      .map((n) => n[0])
                      .join('') || ''
                  }}
                </AvatarFallback>
              </Avatar>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
              </div>
              <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
            :side="isMobile ? 'bottom' : 'right'"
            align="end"
          >
            <DropdownMenuLabel class="p-0 font-normal">
              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar class="h-8 w-8 rounded-lg">
                  <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
                  <AvatarFallback class="rounded-lg">
                    {{
                      userStore?.user_name
                        ?.split(' ')
                        .map((n) => n[0])
                        .join('') || ''
                    }}
                  </AvatarFallback>
                </Avatar>
                <div class="grid flex-1 text-left text-sm leading-tight">
                  <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
                  <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem @click="showModalTheme = true">
                <Icon name="i-lucide-user" />
                Profile
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem @click="handleLogout">
              <Icon name="i-lucide-log-out" />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  </ClientOnly>
</template>

<style scoped></style>
