<template>
  <q-checkbox
    @input="save"
    v-model="defaultValue"
    size="64px"
    color="secondary"
    dense
    class="task-status-toggle"
    :class="{ 'no-pointer-events': !isEditable }"
    keep-color
  />
</template>

<style scoped lang="sass">
.task-status-toggle
  position: absolute
  top: 10px
  left: 10px

::v-deep .q-checkbox__bg
  border-radius: 50%

::v-deep .q-checkbox__svg
  transform: scale(0.75)
</style>

<script lang="ts">
import { Component, Emit, Inject, Prop, Vue } from 'vue-property-decorator'
import { Task } from '@/widgets/tasks/types/Task'
import TaskEditHelper from '@/widgets/tasks/helpers/TaskEditHelper'
import { Manager } from '@/types/Manager'
import { NotifyHelper } from '@/helpers'
import { TaskModule } from '@/widgets/tasks/modules/TaskModule'
import { QCheckbox } from 'quasar'

@Component({ components: { QCheckbox } })
export default class TaskStatusToggle extends Vue {
  @Inject('TaskModule')
  taskModule!: TaskModule

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

  @Prop({ type: Object, required: true })
  manager!: Manager

  defaultValue = !!this.task.finishedAt

  get isEditable(): boolean {
    return TaskEditHelper.isEditAllowed(this.task, this.manager)
  }

  save() {
    this.taskModule.toggleStatus(this.task.id).then(task => {
      this.task.finishedAt = task.finishedAt

      NotifyHelper.success(
        task.finishedAt ? 'Задача закрыта' : 'Задача открыта'
      )

      this.toggleStatus(task)
    })
  }

  @Emit()
  toggleStatus(task: Task) {
    return task
  }
}
</script>
