<template>
  <div>
    <v-text-field
      id="label-name"
      v-model="mutableName"
      label="Name"
    />
    <v-textarea
      id="label-description"
      v-model="mutableDescription"
      label="Description"
      placeholder="The description can be seen when hovering above the label"
      auto-grow
    />
    <compact-picker
      v-model="mutableColour"
      style="width:85%;box-shadow:none;"
    />
    <v-btn
      v-if="!is_update"
      id="create-label-btn"
      :loading="loading"
      color="teal"
      @click="createLabel"
    >
      Create
    </v-btn>
    <v-btn
      v-else
      id="update-label-btn"
      color="teal"
      :loading="loading"
      @click="updateLabel"
    >
      Update
    </v-btn>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop, Watch } from 'vue-property-decorator'
import * as api from '@/api'
import { Compact } from 'vue-color'
import { FeedbackLabels } from '@/store/modules/feedback-labels'

@Component({
  components: {
    'compact-picker': Compact,
  }
})
export default class FeedbackLabelForm extends Vue {
  @Prop({ type: String, default: '' }) readonly name!: string
  @Prop({ type: String, default: '' }) readonly description!: string
  @Prop({ type: String, default: '#4D4D4D' }) readonly colour!: string
  @Prop({ type: Number, required: false }) readonly pk!: number
  @Prop({ type: Boolean, default: false }) readonly is_update!: boolean

  mutableColour = this.colour
  mutableName = this.name
  mutableDescription = this.description

  loading = false

  @Watch('pk')
  onPkChange() { this.resetFields() }

  resetFields () {
    this.mutableName = this.name
    this.mutableDescription = this.description
    this.mutableColour = this.colour
  }

  get label () {
    return {
      name: this.mutableName,
      description: this.mutableDescription,
      // @ts-ignore
      colour: this.mutableColour.hex || this.mutableColour  // hex may be undefined when colour comes from the updater
    }
  }

  get feedbackLabels () {
    return FeedbackLabels.availableLabels
  }

  async createLabel () {
    this.loading = true

    const duplicate = this.feedbackLabels.find((val) => {
      return val.name === this.label.name
    })

    if (duplicate) {
      this.$notify({
        title: 'Label creation error',
        text: 'A label with the same name already exists. ' +
          'You can, however, update the label',
        type: 'error',
        duration: -1
      })
      this.resetFields()
      this.loading = false
      return
    }

    let res
    try {
      res = await api.createLabel(this.label)
      this.notifySuccess()
    } catch (ex) {
      // user will be notified by the interceptor
      this.resetFields()
      this.loading = false
      return
    }

    FeedbackLabels.ADD_LABEL(res)
    this.resetFields()
    this.loading = false
  }

  async updateLabel () {
    this.loading = true
    const label = {
      ...this.label,
      pk: this.pk,
    }

    let res
    try {
      res = await api.updateLabel(label)
      this.notifySuccess(true)
    } catch (ex) {
      // user will be notified by the interceptor
      this.loading = false
      return
    }

    FeedbackLabels.UPDATE_LABEL(label)
    this.$emit('label-updated', label.pk)
    this.loading = false
  }

  notifySuccess (updated = false) {
    const msg = updated ? 'updated' : 'created'

    this.$notify({
        group: 'msg',
        title: 'Success',
        text: 'The label was <b>' + msg + '</b> successfully.',
        type: 'success',
        duration: 5 * 1e3,
    })
  }
}
</script>

<style>

</style>