

<template>
  <div  class="question" v-bind:class="{ 
      'error': isValid == false, 
      'good': isValid == true
    }">
    <label class="form-control-label">{{ label }}</label>
    <span class="info-message" v-if="helpText !== null && helpText !== ''">{{ helpText }}</span>
    <div class="d-flex">
      <input class="form-control"
        v-model="inputValue" 
        v-bind:placeholder="label" 
        v-bind:minlength="minLength ? minLength : ''"
        v-bind:maxlength="maxLength ? maxLength : ''"
        
        v-bind:class="{ 
          'form-control-danger': isValid == false, 
          'form-control-success': isValid == true
        }"
        @change="validate"
        @blur="validate"
        @focus="isValid = null"
      >
      <button class="btn btn-primary" @click="buttonClicked">{{ btnText }}</button>
    </div>
    <p class="form-control-feedback has-danger">{{ validationMessage }}</p>
  </div>
</template>

<script>
import vRules from 'vanilla-validation'
import { validation } from '../mixins/validation.js'

export default {
  name: 'textinputbutton',
  props: {
    inputname: {
      type: String,
      required: true
    },
    label: String,
    required: Boolean,
    value: Object,
    minLength: Number,
    maxLength: Number,
    btnText: String,
    helpText: String,
    sectionID: Number
  },
  mixins: [validation],
  data() {
    return {
      inputValue: ''
    }
  },
  created() {
    // We listen for the event on the eventHub
    this.$eventHub.on('validate', (id) => {
      // if validating by section
      if (this.sectionID != undefined) {
          // if the id provided matches section ID then validate
          if (id === this.sectionID) {
            this.validate()
          }
      } else {
        // if not validating by section
        this.validate()
      }
    })
    
    // if prepopulating set data
    if (this.value !== undefined) {
        this.inputValue = this.value.value
    }
  },
  mounted() {
    // if prepopulating validate the data
    if (this.value !== undefined) {
        this.validate('prepopulated')
    }
  },
  methods: {
    emitValue: function(type){
        // emit validated event
        this.$emit(type, { 
            'value': this.inputValue, 
            'name': this.inputname, 
            'isValid': this.isValid 
        })
    },
    validate: function(type) {
      let elm = this.$el.querySelector('.form-control')
      // check what validations are required
      // and build and array of booleans (these are then checked to see if input is valid)
      let result = [
        // conditional validation rules
        this.required ? vRules.vrule_required(elm) : true,
        this.minLength ? vRules.vrule_minLength(elm, this.minLength) : true,
        this.maxLength ? vRules.vrule_maxLength(elm, this.maxLength) : true
      ]
      
      // check validation result
      // this function is imported from validation mixin
      // if will set the valid status and error message
      this.setValidationStatus(result)

      // default the type to 'validated' if not using prepopulated event type
      let emitType = type !== 'prepopulated' ? 'validated' : type
      // emit the updated value to parent
      this.emitValue(emitType)
    },

    buttonClicked: function(){
      this.$emit('buttonClicked', this.value)
    }
  }
}
</script>
