<script setup lang="ts">
import { ref } from 'vue'
import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity'

defineProps<{
  item: CollectionObject | EntityObject
  size?: 'x-small' | 'small' | 'default'
  variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
  buttonClass?: string
}>()

const emit = defineEmits<{
  'open': [item: CollectionObject | EntityObject]
  'rename': [item: CollectionObject | EntityObject]
  'delete': [item: CollectionObject | EntityObject]
  'download': [item: CollectionObject | EntityObject]
  'show-details': [item: CollectionObject | EntityObject]
}>()

const menuOpen = ref(false)

function handleAction(action: string, item: CollectionObject | EntityObject, event: Event) {
  event.stopPropagation()
  menuOpen.value = false
  
  if (action === 'open') {
    emit('open', item)
  } else if (action === 'rename') {
    emit('rename', item)
  } else if (action === 'delete') {
    emit('delete', item)
  } else if (action === 'download') {
    emit('download', item)
  } else if (action === 'details') {
    emit('show-details', item)
  }
}

function isEntity(item: CollectionObject | EntityObject): item is EntityObject {
  return item instanceof EntityObject
}
</script>

<template>
  <v-menu v-model="menuOpen" location="bottom end">
    <template #activator="{ props: menuProps }">
      <v-btn
        v-bind="menuProps"
        icon="mdi-dots-vertical"
        :size="size ?? 'small'"
        :variant="variant ?? 'text'"
        :class="buttonClass"
        @click.stop
      />
    </template>
    <v-list density="compact">
      <v-list-item v-if="isEntity(item)" @click="(e: Event) => handleAction('open', item, e)">
        <template #prepend><v-icon size="small">mdi-open-in-app</v-icon></template>
        <v-list-item-title>Open</v-list-item-title>
      </v-list-item>
      <v-list-item @click="(e: Event) => handleAction('details', item, e)">
        <template #prepend><v-icon size="small">mdi-information-outline</v-icon></template>
        <v-list-item-title>Details</v-list-item-title>
      </v-list-item>
      <v-list-item v-if="isEntity(item)" @click="(e: Event) => handleAction('download', item, e)">
        <template #prepend><v-icon size="small">mdi-download</v-icon></template>
        <v-list-item-title>Download</v-list-item-title>
      </v-list-item>
      <v-list-item v-else @click="(e: Event) => handleAction('download', item, e)">
        <template #prepend><v-icon size="small">mdi-folder-download</v-icon></template>
        <v-list-item-title>Download as ZIP</v-list-item-title>
      </v-list-item>
      <v-list-item @click="(e: Event) => handleAction('rename', item, e)">
        <template #prepend><v-icon size="small">mdi-pencil</v-icon></template>
        <v-list-item-title>Rename</v-list-item-title>
      </v-list-item>
      <v-divider />
      <v-list-item @click="(e: Event) => handleAction('delete', item, e)" class="text-error">
        <template #prepend><v-icon size="small" color="error">mdi-delete</v-icon></template>
        <v-list-item-title>Delete</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>
