<template>
<template v-if="channel">
<Sidebar>
  <template v-slot:top>
    <h5 class="text-muted mt-3">Users</h5>
    <UserList :channel="channel" />
  </template>
</Sidebar>
<Content autoScroll>

  <template v-slot:title>{{ channel.name }}</template>
  <template v-slot:header>
    <Key :channel="channel" />
  </template>
  <template v-slot:content>
    <Message v-for="message in messages" :key="message.id" :message="message" />
  </template>
  <template v-slot:footer>
    <MessageInput :channel="channel" />
  </template>
</Content>
</template>
<template v-else>
<Sidebar />
<Content>
  <template v-slot:title>Missing channel</template>
  <template v-slot:content>
    <div class="d-flex flex-column text-center">
      <i class="error text-warning bi bi-cone-striped"></i>
      <h2>That channel does not exist!</h2>
    </div>
  </template>
</Content>  
</template>
</template>


<script setup>
import { computed, ref } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import { useChannelStore } from '../stores/channelStore'
import { useMessageStore } from '../stores/messageStore'
import Sidebar from '../components/sidebar/Sidebar.vue'
import Content from '../components/content/Content.vue'
import Key from '../components/common/Key.vue'
import UserList from '../components/sidebar/UserList.vue'
import Message from '../components/conversation/Message.vue'
import MessageInput from '../components/conversation/MessageInput.vue'

const route = useRoute()
const channelStore = useChannelStore()
const messageStore = useMessageStore()

const channel = computed(() => { return channelStore.getChannelById(route.params.channelId) })
const messages = computed(() => { return messageStore.getMessagesByChannelId(route.params.channelId) })

// Show the key in the header.
const keyHidden = ref(false)
onBeforeRouteUpdate(async (to, from) => { keyHidden.value = false })
</script>

<style scoped>
i.error {
  font-size: 10rem;
}
</style>
