<template lang="pug">
  vm-prompt(@vm-cancel="close" @vm-accept="send" @vm-close="close" :vm-accept-text="$t('strings.action_send')" :vm-cancel-text="$t('strings.cancel')" :vm-is-valid="!$v.feedback.$invalid" :vm-active="isModalFeedbackVisible" :vm-title="$t('strings.give_feedback')")
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12" v-shortcuts="[{ shortcut: [ 'enter', ], callback: send, push: true, focus: true, disabled: false },]")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group(style="margin-bottom: 0;")
          label.vm-input--label \{{ $t('feedback.rate') }}
          div(style="text-align: center;")
            vue-feedback-reaction(v-model.sync="feedback.rate")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-textarea(:label="$t('feedback.comment')" counter="300" v-model="feedback.comment")
    vm-row
      b-form-group
        vm-checkbox(v-model="feedback.contact_me") \{{ $t('feedback.contact_me') }}
</template>

<script>
import { VueFeedbackReaction } from 'vue-feedback-reaction'
import { maxLength, required, integer } from 'vuelidate/lib/validators' // Ver documentacion
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ModalFeedback',
  components: {
    VueFeedbackReaction
  },
  data () {
    return {
      feedback: {
        rate: null,
        comment: '',
        contact_me: true
      }
    }
  },
  validations: {
    feedback: {
      rate: {
        required,
        integer
      },
      comment: {
        required,
        maxLength: maxLength(300)
      }
    }
  },
  computed: {
    ...mapGetters([
      'isModalFeedbackVisible'
    ])
  },
  methods: {
    ...mapActions([
      'sendFeedback',
      'setModalFeedbackVisible'
    ]),
    send () {
      this.sendFeedback({ feedback: this.feedback })
    },
    close () {
      this.setModalFeedbackVisible(false)
    }
  }
}
</script>
