<script setup lang="ts">
import { computed, ref } from 'vue'
import { type CreateIssueDto, useIssuesStore } from '@/stores/issues.ts'
import type { Status } from '@/stores/statuses.ts'

const issuesStore = useIssuesStore()

const props = defineProps<{ status: Status }>()

const issue = ref<CreateIssueDto>({
  name: undefined,
  description: undefined,
  status_id: props.status.id,
  project_id: 1,
  position: 0,
})

const showForm = ref<boolean>(false)

const icons = [{ id: 1, title: 'bug' }]
const icon = ref(icons[0])

const disabled = computed(() => !issue.value.name)

const addIssue = async () => {
  const result = await issuesStore.create(issue.value)
  showForm.value = !result
}

function onClickOutside() {
  // showForm.value = false
}
</script>

<template>
  <v-list-item rounded :border="showForm">
    <v-list-item-title v-if="showForm" v-click-outside="onClickOutside">
      <v-text-field hide-details placeholder="title" variant="plain" v-model:model-value="issue.name"></v-text-field>
      <v-row align="end">
        <v-col cols="auto">
          <v-select hide-details v-model:model-value="icon" width="70" :items="icons" variant="plain"></v-select>
        </v-col>
        <v-spacer></v-spacer>
        <v-col cols="auto">
          <v-btn variant="tonal" class="mr-1" :disabled @click="addIssue">ok</v-btn>
          <v-btn variant="tonal" @click="showForm = false">cancel</v-btn>
        </v-col>
      </v-row>
    </v-list-item-title>

    <v-list-item-title v-else>
      <v-btn block @click="showForm = true">create new</v-btn>
    </v-list-item-title>
  </v-list-item>
</template>

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