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

        <v-spacer />

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

      <div class="flex-grow-1">
        <v-list density="compact" :opened="drawerMini ? [] : expanded"
                @update:opened="(val) => expanded = val">
          <channel-list />
          <v-divider class="border-opacity-75 my-2" />
          <realm-list />
        </v-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>
            <user-menu />
          </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>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import { useUserinfo, signout as signoutAccount } from "@/stores/userinfo"
import { useWellKnown } from "@/stores/wellKnown"
import { useUI } from "@/stores/ui"
import RealmList from "@/components/realms/RealmList.vue"
import NotificationList from "@/components/users/NotificationList.vue"
import ChannelList from "@/components/chat/channels/ChannelList.vue"
import UserMenu from "@/components/users/UserMenu.vue"

const ui = useUI()
const expanded = ref<string[]>(["channels"])

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

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

const id = useUserinfo()

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()

useWellKnown().readWellKnown()

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

