<template>
  <div>
    <v-text-field
      name="feedback-input"
      label="Please provide your feedback here"
      v-model="currentFeedback"
      @keyup.enter.ctrl.exact="submitFeedback"
      @keyup.esc="collapseTextField"
      @focus="selectInput($event)"
      rows="2"
      textarea
      autofocus
      auto-grow
      hide-details
    />
    <v-btn color="success" @click="submitFeedback">Submit</v-btn>
    <v-btn @click="discardFeedback">Discard changes</v-btn>
  </div>
</template>


<script>
  import {subNotesMut, subNotesNamespace} from '@/store/modules/submission-notes'

  export default {
    name: 'comment-form',
    props: {
      feedback: {
        type: String,
        default: ''
      },
      lineNo: {
        type: String,
        required: true
      }
    },
    data () {
      return {
        currentFeedback: this.feedback
      }
    },
    methods: {
      selectInput (event) {
        if (event) {
          event.target.select()
        }
      },
      collapseTextField () {
        this.$emit('collapseFeedbackForm')
      },
      submitFeedback () {
        this.$store.commit(subNotesNamespace(subNotesMut.UPDATE_FEEDBACK_LINE), {
          lineNo: this.lineNo,
          comment: {
            text: this.currentFeedback
          }
        })
        this.collapseTextField()
      },
      discardFeedback () {
        this.currentFeedback = this.feedback
      }
    }
  }
</script>


<style scoped>
  v-text-field {
    padding-top: 0px;
  }
</style>