<template>
  <div
    class="mds-form__field-group"
    :class="{ 'mds-form__field-group--error': v.$error }"
  >
    <mds-label
      :for="id"
      required
    >
      {{ title }}
    </mds-label>
<!--    // TODO: MDS-->
<!--    <mds-label :for="id">-->
<!--      <mds-input   :id="id"-->
<!--                   v-model="inputVal"-->
<!--                   class="mds-form__input mds-form__input&#45;&#45;medium"-->
<!--                   :aria-describedby="described"-->
<!--                   :type="type"-->
<!--      ></mds-input>-->
<!--    </mds-label>-->
      <input
        :id="id"
        v-model="inputVal"
        class="mds-form__input mds-form__input--medium"
        :aria-describedby="described"
        :type="type"
        :aria-label="id"
        :aria-labelledby="id"
      >
      <span v-if="id==='passwordInput' && value" class="password-show-icon">
                    <mds-button
                      class="showPasswordButton"
                      variation="flat"
                      type="button"
                      @click="handleShowPassword"
                    >
                      {{passwordText}}
                    </mds-button>
      </span>
    <span
      v-show="v.$error"
      :id="described"
      class="mds-form__field-error"
      role="alert"
    > {{ error }} </span>
  </div>
</template>

<script>
import { MDSLabel, MDSInput } from '../imports'

export default {
  name: 'InputField',
  props: {
    value: {
      type: String,
      default: ''
    },
    v: {
      type: Object,
      required: true
    },
    id: { type: String, default: '' },
    title: { type: String, default: '' },
    described: { type: String, default: '' },
    type: { type: String, default: '' },
    error: { type: String, default: '' }
  },
  data () {
    return {
      hasError: false
    }
  },
  computed: {
    inputVal: {
      get () {
        return this.value
      },
      set (value) {
        this.v.$touch()
        this.$emit('input', value)
      }
    },
    passwordText () {
      if (this.id === 'passwordInput' && this.type === 'password') {
        return 'Show'
      }
      return 'Hide'
    }
  },
  methods: {
    handleShowPassword () {
      this.$emit('handleShowPassword')
    }
  }
}
</script>
