<template>
  <form @submit.prevent="sendComment" class="q-mt-xs">
    <ui-input-material
      @focus="isShowButtons = true"
      v-model="text"
      label="Комментарий"
      :class="{ 'note-comment': isNoteType }"
    />
    <div v-if="isShowButtons" class="flex no-wrap ui-gap-x-sm q-mt-sm">
      <ui-btn
        :disable="!text"
        outline
        rounded
        label="Отправить"
        type="submit"
      />
      <ui-btn
        @click="cancel"
        rounded
        outline
        label="Отмена"
        color="blue-grey"
      />
    </div>
  </form>
</template>

<style scoped lang="sass">
::v-deep
  .note-comment .q-field__control
    background-color: $yellow-1 !important
</style>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import UiInputMaterial from '@/lib-components/form/UiInputMaterial.vue'
import UiBtn from '@/lib-components/buttons/UiBtn.vue'
import { Task, TaskType } from '@/widgets/tasks/types/Task'
import { TaskModule } from '@/widgets/tasks/modules/TaskModule'

@Component({
  components: { UiBtn, UiInputMaterial },
})
export default class CommentForm extends Vue {
  @Inject('TaskModule')
  taskModule!: TaskModule

  @Prop({ type: Object, required: true })
  task!: Task

  text = ''
  isShowButtons = false

  get isNoteType(): boolean {
    return this.task.type === TaskType.note
  }

  async sendComment() {
    if (!this.text) {
      return
    }

    await this.taskModule.addComment({
      taskId: this.task.id,
      comment: this.text,
    })

    this.cancel()
  }

  cancel() {
    this.text = ''
    this.isShowButtons = false
  }
}
</script>
