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

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

const { isMobile } = useSidebar()
const { user, logout, setActiveRole, getActiveRole } = useUserStore()
// const { initKeycloak, logoutSSO } = useKeycloak()
// const userStore = useUserStore().user

function handleLogout() {
  // initKeycloak('check-sso')

  navigateTo('/auth/login')
  logout()
  // logoutSSO(window.location.origin + '/auth/login')
}

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="user.user_name || 'system'" />
                <AvatarFallback class="rounded-lg">
                  {{
                    user.user_name
                      ?.split(' ')
                      .map((n: string) => n[0])
                      .join('') || ''
                  }}
                </AvatarFallback>
              </Avatar>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
                <span class="truncate text-xs">{{ user.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 bg-white"
            :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="user.user_name || 'system'" />
                  <AvatarFallback class="rounded-lg">
                    {{
                      user.user_name
                        ?.split(' ')
                        .map((n: string) => n[0])
                        .join('') || ''
                    }}
                  </AvatarFallback>
                </Avatar>
                <div class="grid flex-1 text-left text-sm leading-tight">
                  <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
                  <span class="truncate text-xs">{{ user.user_email || '' }}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
              <Icon name="i-lucide-user" />
              Profile
            </DropdownMenuItem>
            <template v-if="user.roles.length > 1">
              <DropdownMenuSeparator />
              <DropdownMenuItem v-for="role in user.roles" class="hover:bg-gray-100" @click="setActiveRole(role)">
                <Icon name="i-lucide-user" />
                {{ role }}
                <Icon name="i-lucide-check" class="ml-auto" v-if="getActiveRole() === role" />
              </DropdownMenuItem>
            </template>
            <DropdownMenuSeparator />
            <DropdownMenuItem class="hover:bg-gray-100" @click="handleLogout">
              <Icon name="i-lucide-log-out" />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  </ClientOnly>
</template>

<style scoped></style>
