<script>
export default {
  props: {
    id: {default: ''},
    is_disabled: {default: false},
    is_submitted: {default: false},
    size: {default: 'md'},
    value: {default: ''},
    type: {default: "password"},
    placeholder: {default: ''},
    is_error: {default: false},
    max_length: {default: 524288},
    additional_class: {default: ''}
  },
  data() {
    return {
      input_class: "form-control",
      is_password_type: true,
    }
  },

  watch: {
    is_error: function () {
      this.generateInputClass()
    },

    is_submitted: function () {
      this.generateInputClass()
    },
  },

  methods: {
    updateToParent(value) {
      this.$emit('input', (value) ? value : '')
      document.getElementById(this.id).value = value
    },

    submitToParent() {
      this.$emit("submit")
    },

    convertSizeToClass(size) {
      switch (size) {
        case  'md' :
          return 'form-control'
          break;
        case  'sm' :
          return 'form-control-sm'
          break;
        case  'lg' :
          return 'form-control-lg'
          break;
        default:
          return "form-control"
      }
    },

    generateInputClass() {
      if (this.is_submitted && this.is_error) {
        this.input_class = `${this.convertSizeToClass(this.size)} is-invalid ${this.additional_class}`
      } else {
        this.input_class = `${this.convertSizeToClass(this.size)} ${this.additional_class}`
      }
    },

    togglePasswordType() {
      this.is_password_type = !this.is_password_type
    },
  }
}
</script>
<template>

  <div class="input-group input-group-merge">
    <input :value="(value) ? value : ''" v-on:keyup="updateToParent($event.target.value)" :disabled="is_disabled"
           :class="input_class" :id="id" :maxlength="max_length" :placeholder="placeholder"
           :type="(is_password_type) ? 'password' : 'text' " @keyup.enter="submitToParent"/>
    <div class="input-group-append" data-password="false">
      <div class="input-group-text cursor-pointer" @click="togglePasswordType">
        <i v-if="is_password_type" class="bx bx-show"></i>
        <i v-else class="bx bx-hide"></i>
      </div>
    </div>
  </div>
</template>
<style>
input::placeholder {
  color: #cecece !important;
}
</style>