<template>
  <v-navigation-drawer
    v-model="drawerOpen"
    color="grey-lighten-5"
    width="320"
    :rail="drawerMini"
    :rail-width="58"
    :order="0"
    @click="drawerMini = false"
  >
    <div class="flex flex-col h-full">
      <div class="flex items-center justify-between px-3 pb-2.5 border-opacity-15 min-h-[64px]"
           style="border-bottom-width: thin"
           :style="`padding-top: max(${safeAreaTop}, 10px)`">
        <div class="flex items-center">
          <img src="/favicon.png" alt="Logo" width="36" height="36" class="block" />
          <div v-show="!drawerMini" class="ms-6 font-medium">Solar Network</div>
        </div>

        <v-btn
          v-show="!drawerMini"
          icon="mdi-arrow-collapse-left"
          size="small"
          variant="text"
          @click.stop="drawerMini = true"
        />
      </div>

      <div class="flex-grow-1">
        <realm-list />
      </div>

      <!-- User info -->
      <v-list class="border-opacity-15 h-[64px]" style="border-top-width: thin"
              :style="`margin-bottom: ${safeAreaBottom}`">
        <v-list-item :subtitle="username" :title="nickname">
          <template #prepend>
            <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
          </template>
          <template #append>
            <v-menu v-if="id.userinfo.isLoggedIn">
              <template #activator="{ props }">
                <v-btn v-bind="props" icon="mdi-menu-down" size="small" variant="text" />
              </template>

              <v-list density="compact">
                <v-list-item title="Solarpass" prepend-icon="mdi-passport-biometric" target="_blank"
                             :href="passportUrl" />
              </v-list>
            </v-menu>

            <v-btn v-else icon="mdi-login-variant" size="small" variant="text" :to="{ name: 'auth.sign-in' }" />
          </template>
        </v-list-item>
      </v-list>
    </div>
  </v-navigation-drawer>

  <v-app-bar height="64" color="primary" scroll-behavior="hide" :order="2" flat>
    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
      <v-app-bar-nav-icon variant="text" @click.stop="drawerOpen = !drawerOpen" />

      <router-link :to="{ name: 'explore' }">
        <h2 class="ml-2 text-lg font-500">Solian</h2>
      </router-link>

      <v-spacer />

      <div v-if="id.userinfo.isLoggedIn">
        <notification-list />
      </div>
    </div>
  </v-app-bar>

  <v-main id="main">
    <router-view />
  </v-main>

  <v-menu open-on-hover open-on-click :open-delay="0" :close-delay="0" location="top"
          transition="scroll-y-reverse-transition">
    <template v-slot:activator="{ props }">
      <v-fab v-bind="props" appear class="editor-fab" icon="mdi-pencil" color="primary" size="64"
             :active="id.userinfo.isLoggedIn" />
    </template>

    <div class="flex flex-col items-center gap-4 mb-4">
      <v-btn variant="elevated" color="secondary" icon="mdi-newspaper-variant" @click="editor.show.article = true" />
      <v-btn variant="elevated" color="accent" icon="mdi-camera-iris" @click="editor.show.moment = true" />
    </div>
  </v-menu>

  <post-tools />
  <realm-tools />
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import { useEditor } from "@/stores/editor"
import { useUserinfo } from "@/stores/userinfo"
import { useWellKnown } from "@/stores/wellKnown"
import { useUI } from "@/stores/ui"
import PostTools from "@/components/publish/PostTools.vue"
import RealmTools from "@/components/realms/RealmTools.vue"
import RealmList from "@/components/realms/RealmList.vue"
import NotificationList from "@/components/NotificationList.vue"

const ui = useUI()

const safeAreaTop = computed(() => {
  return `${ui.safeArea.top}px`
})

const safeAreaBottom = computed(() => {
  return `${ui.safeArea.bottom}px`
})

const id = useUserinfo()
const editor = useEditor()

const username = computed(() => {
  if (id.userinfo.isLoggedIn) {
    return "@" + id.userinfo.data?.name
  } else {
    return "@vistor"
  }
})
const nickname = computed(() => {
  if (id.userinfo.isLoggedIn) {
    return id.userinfo.data?.nick
  } else {
    return "Anonymous"
  }
})

id.readProfiles()

const meta = useWellKnown()

const passportUrl = computed(() => {
  return meta.wellKnown?.components?.identity
})

meta.readWellKnown()

const drawerOpen = ref(true)
const drawerMini = ref(false)
</script>

<style scoped>
.editor-fab {
  position: fixed !important;
  bottom: 16px;
  right: 20px;
}
</style>
