<template>
  <v-list-group value="channels">
    <template #activator="{ props }">
      <v-list-item
        v-bind="props"
        prepend-icon="mdi-chat"
        title="Channels"
      />
    </template>

    <v-list-item
      v-for="item in channels.available"
      exact
      append-icon="mdi-pound-box"
      :to="{ name: 'chat.channel', params: { channel: item.alias } }"
      :title="item.name"
    />

    <v-list-item
      append-icon="mdi-plus"
      title="Create a channel"
      variant="plain"
      :disabled="!id.userinfo.isLoggedIn"
      @click="createChannel"
    />
  </v-list-group>
</template>

<script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo"
import { useRealms } from "@/stores/realms"
import { useChannels } from "@/stores/channels"

const id = useUserinfo()
const channels = useChannels()

function createChannel() {
  channels.related.edit_to = null
  channels.related.manage_to = null
  channels.related.delete_to = null
  channels.show.editor = true
}
</script>
