<template>
  <v-app>
    <v-app-bar color="primary" prominent>
      <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer" />
      <v-toolbar-title>Unbound Schemas</v-toolbar-title>
      <v-spacer />

      <template v-if="auth0?.isLoading?.value">
        <v-progress-circular indeterminate size="24" width="2" />
      </template>

      <template v-else-if="auth0?.isAuthenticated?.value">
        <OrganizationSwitcher class="mr-4" />

        <v-menu>
          <template #activator="{ props }">
            <v-btn v-bind="props" variant="text">
              <v-avatar size="32" class="mr-2">
                <v-img v-if="auth0?.user?.value?.picture" :src="auth0.user.value.picture" />
                <v-icon v-else>mdi-account-circle</v-icon>
              </v-avatar>
              {{ auth0?.user?.value?.name || auth0?.user?.value?.email }}
            </v-btn>
          </template>
          <v-list>
            <v-list-item>
              <v-list-item-title>{{ auth0?.user?.value?.email }}</v-list-item-title>
              <v-list-item-subtitle>{{ auth0?.user?.value?.name }}</v-list-item-subtitle>
            </v-list-item>
            <v-divider />
            <v-list-item prepend-icon="mdi-cog" title="Settings" to="/settings" />
            <v-list-item prepend-icon="mdi-logout" title="Logout" @click="auth0?.logout({ logoutParams: { returnTo: window.location.origin } })" />
          </v-list>
        </v-menu>
      </template>

      <template v-else>
        <v-btn variant="outlined" @click="auth0?.loginWithRedirect()">
          Login
        </v-btn>
      </template>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" temporary>
      <v-list>
        <v-list-item
          prepend-icon="mdi-view-dashboard"
          title="Dashboard"
          to="/"
        />
        <v-list-item
          prepend-icon="mdi-graphql"
          title="Schemas"
          to="/schemas"
        />
        <v-list-item
          prepend-icon="mdi-source-branch"
          title="Refs"
          to="/refs"
        />
        <v-list-item
          prepend-icon="mdi-cog"
          title="Settings"
          to="/settings"
        />
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <v-container fluid>
        <NuxtPage />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'

const drawer = ref(false)
const auth0 = useAuth0()
</script>
