<script setup lang="ts">
import { type Issue, useIssuesStore } from '@/stores/issues.ts'

const props = defineProps<{ issue: Issue }>()

const issuesStore = useIssuesStore()

const menu = [
  {
    id: 1,
    title: 'delete',
    icon: 'mdi-trash-can',
  },
]

async function onDelete() {
  await issuesStore.remove(props.issue.id)
}
</script>

<template>
  <v-list-item rounded border class="mb-1">
    <template v-slot:prepend>
      <v-icon class="handle move" icon="mdi-drag" />
    </template>
    <v-list-item-subtitle>
      <div>{{ props.issue.description }}</div>
    </v-list-item-subtitle>
    <v-list-item-title>
      <div class="d-flex ga-2 align-center">
        <!--        <v-icon size="small" icon="mdi-bug" color="primary"></v-icon>-->
        <v-chip :text="issue.id" variant="tonal" size="small" label />
        <div class="text-body-1">{{ props.issue.name }}</div>
      </div>
    </v-list-item-title>

    <template #append>
      <v-list-item-action class="ga-2">
        <v-avatar color="primary" size="28" />
        <v-menu>
          <template v-slot:activator="{ props }">
            <v-btn size="small" icon="mdi-menu" variant="plain" v-bind="props" />
          </template>

          <v-list density="compact" class="mt-1">
            <v-list-item v-for="item in menu" :key="item.id" :value="item.title" @click="onDelete">
              <v-list-item-title>
                <div class="d-flex ga-2 align-center">
                  <v-icon size="small" :icon="item.icon"></v-icon>
                  {{ item.title }}
                </div>
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-list-item-action>
    </template>
  </v-list-item>
</template>

<style scoped lang="scss">
.move {
  cursor: move;
}
</style>
