<template>
  <v-app-bar :order="5" color="grey-lighten-3">
    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
      <v-app-bar-nav-icon icon="mdi-chat" :loading="loading" />

      <h2 class="ml-2 text-lg font-500">{{ metadata?.name }}</h2>

      <p class="ml-3 text-xs opacity-80">{{ metadata?.description }}</p>
    </div>
  </v-app-bar>

  <!-- @vue-ignore -->
  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
</template>

<script setup lang="ts">
import { request } from "@/scripts/request"
import { useRoute } from "vue-router"
import { ref } from "vue"

const route = useRoute()

const error = ref<string | null>(null)
const loading = ref(false)

const metadata = ref<any>(null)

async function readMetadata() {
  loading.value = true
  const res = await request("messaging", `/api/channels/${route.params.channel}`)
  if (res.status !== 200) {
    error.value = await res.text()
  } else {
    error.value = null
    metadata.value = await res.json()
  }
  loading.value = false
}

readMetadata()
</script>