<script setup>
const { isHelpSlideoverOpen } = useDashboard()
const { isDashboardSearchModalOpen } = useUIState()
const { metaSymbol } = useShortcuts()
const user = useSupabaseUser()
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const router = useRouter()

const items = computed(() => [
  [{
    slot: 'account',
    label: '',
    disabled: true
  }],  [{
    label: 'Mein Profil',
    icon: 'i-heroicons-user',
    to: `/profiles/show/${profileStore.activeProfile.id}`
  },{
    label: 'Abmelden',
    icon: 'i-heroicons-arrow-left-on-rectangle',
    click: async () => {
      await supabase.auth.signOut()
      //await dataStore.clearStore()
      await router.push('/login')

    }
  }]
])
</script>

<template>
  <UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full">
    <template #default="{ open }">
      <UButton color="gray" variant="ghost" class="w-full" :label="profileStore.activeProfile.fullName" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
        <template #leading>
          <UAvatar :alt="profileStore.activeProfile ? profileStore.activeProfile.fullName : ''"  size="xs" />
        </template>

        <template #trailing>
          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
        </template>
      </UButton>
    </template>

    <template #account>
      <div class="text-left">
        <p>
          Angemeldet als
        </p>
        <p class="truncate font-medium text-gray-900 dark:text-white">
          {{profileStore.activeProfile.email}}
        </p>
      </div>
    </template>
  </UDropdown>
</template>