<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'

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 max-width="900" min-width="700">
    <template #append>
      <div class="d-flex ga-2">
        <v-btn variant="outlined" class="border rounded" @click="emit('onCancel')" icon="mdi-dots-horizontal"></v-btn>
        <v-btn variant="outlined" 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-2">
          <div class="text-h5">{{ props.selectedIssue.name }}</div>
          <div>
            <div>description</div>
            <div>{{ props.selectedIssue.description ?? 'add description' }}</div>
          </div>
          <div>
            <v-textarea rows="3"></v-textarea>
            <v-btn variant="flat" color="primary">save</v-btn>
            <v-btn variant="text">cancel</v-btn>
          </div>
        </v-col>

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

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