<template>
  <v-app-bar :order="5" scroll-behavior="hide" color="grey-lighten-3">
    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center max-w-full">
      <v-app-bar-nav-icon icon="mdi-chat" :loading="loading" :to="{ name: 'explore' }" />

      <h2 class="ml-2 text-lg font-500 overflow-hidden ws-nowrap text-clip">{{ channels.current?.name }}</h2>
      <p class="ml-3 text-xs opacity-80 overflow-hidden ws-nowrap text-clip">{{ channels.current?.description }}</p>

      <v-spacer />
    </div>

    <template v-if="channels.current" #append>
      <v-btn
        v-if="channels.call"
        icon="mdi-phone-hangup"
        size="small"
        variant="text"
        :loading="calling"
        @click="endsCall"
      />
      <v-btn
        v-else
        icon="mdi-phone-plus"
        variant="text"
        size="small"
        :loading="calling"
        @click="makeCall"
      />

      <div class="me-5">
        <channel-action :item="channels.current" />
      </div>
    </template>
  </v-app-bar>

  <router-view />
</template>

<script setup lang="ts">
import { request } from "@/scripts/request"
import { useRoute } from "vue-router"
import { onMounted, onUnmounted, ref, watch } from "vue"
import { useChannels } from "@/stores/channels"
import ChannelAction from "@/components/chat/channels/ChannelAction.vue"
import { useUI } from "@/stores/ui"
import { getAtk } from "@/stores/userinfo"

const { showErrorSnackbar } = useUI()

const ui = useUI()
const route = useRoute()
const channels = useChannels()

const loading = ref(false)
const calling = ref(false)

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

async function makeCall() {
  calling.value = true
  const res = await request("messaging", `/api/channels/${route.params.channel}/calls`, {
    method: "POST",
    headers: { Authorization: `Bearer ${await getAtk()}` }
  })
  if (res.status !== 200) {
    showErrorSnackbar(await res.text())
  }
  calling.value = false
}

async function endsCall() {
  calling.value = true
  const res = await request("messaging", `/api/channels/${route.params.channel}/calls/ongoing`, {
    method: "DELETE",
    headers: { Authorization: `Bearer ${await getAtk()}` }
  })
  if (res.status !== 200) {
    showErrorSnackbar(await res.text())
  }
  calling.value = false
}

watch(
  () => route.params.channel,
  (val) => {
    if (val) {
      channels.messages = []
      readMetadata()
    }
  },
  { immediate: true }
)

watch(() => channels.done, (val) => {
  if (val) {
    readMetadata().then(() => {
      channels.messages = []
      channels.done = false
    })
  }
}, { immediate: true })

watch(
  () => channels.current,
  (val) => {
    ui.appbar.show = !val
  }
)

onMounted(() => {
  channels.current = null
  channels.messages = []
})

onUnmounted(() => ui.appbar.show = true)
</script>