<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>
    <span class="info-message" v-if="helpHTML !== undefined" v-html="helpHTML"></span>
    <span class="input-select">
      <select
        v-model="selectedValue" 
        :placeholder="label" 
        :class="{ 
          'error': isValid == false, 
          'good': isValid == true
        }"
        @change="validate"
        @focus="isValid = null"
      > 
        <option value="Please select..." :selected="selectedValue === 'Please select...'" hidden>Please select...</option>
        <template v-for="option in selectOptions">
          <option 
          :key="option.name" 
          :value="option.value" 
          :selected="selectedValue === option.value" >{{ option.name }}</option>
        </template>
      </select>
    </span>
    <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: 'selectinput',
  props: {
    inputname: {
      type: String,
      required: true
    },
    label: String,
    required: Boolean,
    value: Object,
    helpText: String,
    helpHTML: String,
    selectOptions: Array,
    sectionID: Number
  },
  mixins: [validation],
  data() {
    return {
      selectedValue: null
    }
  },
  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.selectedValue = this.value.value
    } else {
        this.selectedValue = 'Please select...'
    }
  },
  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.selectedValue, 
            'name': this.inputname, 
            'isValid': this.isValid 
        })
    },
    validate: function(type) {
        let elm = this.$el.querySelector('select')
        // 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,
        ]
        
        // 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)
    }
  }
}
</script>
