<script setup>

const dataStore = useDataStore()
const supabase = useSupabaseClient()
const router = useRouter()

const items = [{
  label: 'Profil',
},{
  label: 'Projekte',
  content: 'This is the content shown for Tab1'
}, {
  label: 'E-Mail',
  content: 'And, this is the content for Tab2'
}, {
  label: 'Dokumente'
}]

const colorMode = useColorMode()
const isLight = computed({
  get() {
    return colorMode.value !== 'dark'
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})


</script>

<template>
  <UTabs
      :items="items"
      class="h-100"
  >
    <template #item="{item}">
      <UCard class="mt-5">
        <div v-if="item.label === 'Profil'">
          <div v-if="dataStore.getOwnProfile.tenants.length > 1">
            <UDivider
                class="my-3"
                label="Tenant"
            />

            <USelectMenu
                :options="dataStore.getOwnProfile.tenants"
                option-attribute="name"
                value-attribute="id"
                v-model="dataStore.currentTenant"
                @change="dataStore.changeTenant()"
            />
          </div>

          <UDivider
              class="my-3"
              label="Profil"
          />

          <InputGroup>
            <UButton
                :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
                color="white"
                variant="outline"
                aria-label="Theme"
                @click="isLight = !isLight"
            />
            <UButton
                color="rose"
                variant="outline"
                @click="async () => {
                      await supabase.auth.signOut()
                      await dataStore.clearStore()
                      await router.push('/login')

                  }"
            >
              Ausloggen
            </UButton>
          </InputGroup>

        </div>
        <div v-else-if="item.label === 'Projekte'">
          <UDivider
            label="Phasenvorlagen"
          />
        </div>
        <div v-else-if="item.label === 'Dokumente'">
          <UDivider
              label="Tags"
              class="mb-3"
          />
          <InputGroup>
            <UBadge
                v-for="tag in dataStore.ownTenant.tags.documents"
            >
              {{tag}}
            </UBadge>
          </InputGroup>


          {{dataStore.ownTenant.tags}}
        </div>
      </UCard>

    </template>
  </UTabs>
</template>

<style scoped>

</style>