<template lang="pug">
  vm-prompt(@vm-cancel="close" @vm-accept="sendFeedback(feedback)" @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: sendFeedback(feedback), push: true, focus: true, disabled: false },]")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          label.vm-input--label \{{ $t('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 { maxLength, required } from 'vuelidate/lib/validators' // Ver documentacion
import { mapGetters, mapActions } from 'vuex'

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