<script setup lang="ts">
import { type Issue, useIssuesStore } from '@/stores/issues.ts'
import { useStatusesStore } from '@/stores/statuses.ts'
import { useRouter } from 'vue-router'
import { computed } from 'vue'

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

const issuesStore = useIssuesStore()
const statusesStore = useStatusesStore()

const projectKey = computed(() => props.issue.project.key)

const onDelete = async (id: number) => await issuesStore.remove(id)

function onStatusChange(statusId: number) {
  console.log('on change status', statusId)
}
function onClick(id: number) {
  console.log('on click', id)
  router.push({ name: 'issues', query: { selectedIssue: `${projectKey.value}-${id}` } })
}
</script>

<template>
  <v-list-item rounded border class="mb-1 pl-2" @click="onClick(props.issue.id)">
    <template v-slot:prepend>
      <v-icon class="handle cursor-move" icon="mdi-drag" />
    </template>
    <v-list-item-subtitle>
      <div class="text-caption">{{ 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-2 text-wrap">{{ 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 icon rounded variant="text" v-bind="props">
              <v-icon size="small">mdi-menu</v-icon>
            </v-btn>
          </template>

          <v-list density="compact" class="mt-1">
            <v-list-item link>
              <v-list-item-title>
                <div class="d-flex ga-2 align-center">
                  <div>Change status</div>
                  <v-icon icon="mdi-menu-right"></v-icon>
                </div>
              </v-list-item-title>
              <v-menu v-if="statusesStore.statuses" :open-on-focus="false" activator="parent" open-on-hover submenu>
                <v-list>
                  <v-list-item
                    v-for="status in statusesStore.statuses"
                    :key="status.id"
                    link
                    @click="onStatusChange(status.id)"
                    :title="status.name"
                  >
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-list-item>
            <v-divider class="my-1"></v-divider>
            <v-list-item link @click="onDelete(props.issue.id)" title="Delete"></v-list-item>
          </v-list>
        </v-menu>
      </v-list-item-action>
    </template>
  </v-list-item>
</template>

<style scoped lang="scss"></style>
