<template>
  <v-layout wrap justify-start>
    <v-flex ml-3 xs9>
      <v-text-field
        label="Name"
        v-model="name"
      />
    </v-flex>
    <v-flex ml-3 xs9>
      <v-textarea
        label="Description"
        v-model="description"
        placeholder="The description can be seen when hovering above the label"
        auto-grow
      />
    </v-flex>
    <v-flex ml-2 xs12>
      <compact-picker style="width:85%;box-shadow:none;" v-model="colour"/>
    </v-flex>
    <v-flex ml-1 mb-3 xs4>
        <v-btn id="create-label-btn" v-if="!is_update" :loading="loading" color="teal" @click="createLabel">Create</v-btn>
        <v-btn id="update-label-btn" v-else color="teal" :loading="loading" @click="updateLabel">Update</v-btn>
    </v-flex>
  </v-layout>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Prop } 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: "" }) name!: string
  @Prop({ type: String, default: "" }) description!: string
  @Prop({ type: String, default: "#4d4d4d" }) colour!: string
  @Prop({ type: Number, required: false }) readonly pk!: number
  @Prop({ type: Boolean, default: false }) readonly is_update!: boolean

  loading = false

  get feedbackLabels () {
    return FeedbackLabels.availableLabels
  }

  async createLabel () {
    this.loading = true
    const label = {
      name: this.name,
      description: this.description,
      // @ts-ignore
      colour: this.colour.hex,
    }

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

    if (duplicate) {
      this.$notify({
        title: "Label creation error",
        text: "A label with the same name already exists. " + 
          "You can update it if you are a reviewer or ask a reviewer to update it if not.",
        type: 'error',
        duration: -1
      })
      this.resetFields()
      this.loading = false
      return;
    }

    let res
    try {
      res = await api.createLabel(label)
    } 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 = {
      pk: this.pk,
      name: this.name,
      description: this.description,
      // @ts-ignore
      colour: this.colour.hex,
    }

    let res
    try {
      res = await api.updateLabel(label)
    } 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
  }

  resetFields () {
    this.name = ""
    this.description = ""
    this.colour = "#4d4d4d"
  }
}
</script>

<style>

</style>