<script setup lang="ts">
// const isActive = defineModel<boolean>('isActive', { required: false })
import type { Issue } from '@/stores/issues.ts'
import { computed } from 'vue'
import StatusMenu from '@/components/StatusMenu.vue'
import EditableText from '@/components/EditableText.vue'
import IssueItemAddComment from '@/components/IssueItemAddComment.vue'
import IssueItemAddons from '@/components/IssueItemAddons.vue'

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

const emit = defineEmits<{
  (e: 'onCancel'): void
}>()

const created = computed(() => {
  return props.selectedIssue.created ? new Date(props.selectedIssue.created).toLocaleString('ru-RU') : undefined
})

const issueId = computed(() => {
  return props.selectedIssue.project.key + '-' + props.selectedIssue.id
})
</script>

<template>
  <v-card :width="800">
    <template #append>
      <div class="d-flex ga-2">
        <v-btn class="border rounded" @click="emit('onCancel')" icon="mdi-dots-horizontal"></v-btn>
        <v-btn class="border rounded" @click="emit('onCancel')" icon="mdi-close"></v-btn>
      </div>
    </template>
    <template #title>
      <div class="text-body-1">{{ issueId }}</div>
    </template>
    <v-card-text>
      <v-row>
        <v-col class="d-flex flex-column ga-4">
          <div class="text-h5">{{ props.selectedIssue.name }}</div>
          <div>
            <div>description</div>
            <editable-text :text="props.selectedIssue.description" />
          </div>

          <issue-item-addons />
        </v-col>
        <v-col class="d-flex flex-column ga-4 align-start">
          <status-menu class="" :status="props.selectedIssue.status"></status-menu>
          <v-sheet border class="pa-4 w-100">
            <div>
              assignee:x
              <v-avatar size="x-small" text="M" color="success"></v-avatar>
            </div>
          </v-sheet>
          <div class="text-caption">created: {{ created }}</div>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

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