<template>
  <v-menu>
    <template #activator="{ props }">
      <v-btn v-bind="props" icon="mdi-cog" variant="text" />
    </template>

    <v-list density="compact" lines="one">
      <v-list-item disabled append-icon="mdi-flag" title="Report" />
      <v-list-item v-if="isOwned" append-icon="mdi-pencil" title="Edit" @click="editChannel" />
      <v-list-item v-if="isOwned" append-icon="mdi-account-supervisor-circle" title="Members" @click="manageChannel" />
      <v-list-item v-if="isOwned" append-icon="mdi-delete" title="Delete" @click="deleteChannel" />
    </v-list>
  </v-menu>
</template>

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

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

const props = defineProps<{ item: any }>()

const isOwned = computed(() => props.item?.account_id === id.userinfo.idSet?.messaging)

function editChannel() {
  channels.related.edit_to = props.item
  channels.show.editor = true
}

function manageChannel() {
  channels.related.manage_to = props.item
  channels.show.members = true
}

function deleteChannel() {
  channels.related.delete_to = props.item
  channels.show.delete = true
}
</script>
