<template>
  <div class="question" v-bind:class="{ 
      'error': isValid == false, 
      'good': isValid == true
    }">
    <label v-show="label !== null && label !== ''">{{ label }}</label>
    <span class="info-message" v-if="helpText !== undefined">{{ helpText }}</span>
    <input
      v-model="inputValue" 
      :placeholder="placeholder ? placeholder : label" 
      :minlength="minLength ? minLength : ''"
      :maxlength="maxLength ? maxLength : ''"
      :class="{ 
        'error': isValid == false, 
        'good': isValid == true
      }"
      @keydown="blockNumerical($event)"
      @blur="validate"
      @focus="isValid = null"
    >
    <p class="error-message">{{ validationMessage }}</p>
  </div>
</template>

<script>
// create event hub for validation events
import Vue from 'vue'
//import EventHub from 'vue-event-hub'
//Vue.use(EventHub)

import vRules from 'vanilla-validation'

import { validation } from '../mixins/validation.js'

export default {
  name: 'textinput',
  props: {
    inputname: {
      type: String,
      required: true
    },
    label: String,
    required: Boolean,
    value: Object,
    minLength: Number,
    maxLength: Number,
    helpText: String,
    placeholder: String,
    sectionID: Number,
    textOnly: {
      type: Boolean,
      default: true
    },
    blockNumbers: {
      type: Boolean,
      default: false
    },
    customErrors: {
      type: Object,
      default: function () { 
        return {
          required: null,
          minLength: null,
          maxLength: null
        }
      }
    }
  },
  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.value.value !== null) {
        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('input')
      // 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.textOnly ? vRules.vrule_textInput(elm) : true,
        this.required ? vRules.vrule_required(elm, this.customErrors.required) : true,
        this.minLength ? vRules.vrule_minLength(elm, this.minLength, this.customErrors.minLength) : true,
        this.maxLength ? vRules.vrule_maxLength(elm, this.maxLength, this.customErrors.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)
    },
    blockNumerical: function (event) {
      if (this.blockNumbers || this.textOnly) {
        event = event || window.event;
        const charCode = (typeof event.which == "undefined") ? event.keyCode : event.which;
        const charStr = String.fromCharCode(charCode);
        if (/\d/.test(charStr) || charCode === 97 || charCode === 98 || charCode === 99 || charCode === 100 || charCode === 101 || charCode === 102 || charCode === 103 || charCode === 104 || charCode === 105) {
          event.preventDefault()
        }
      }
    },
  }
}
</script>
