<template>

  <div class="itf-text-field input-group form-control p-0" :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }">
    <slot name="addon">
      <div class="input-group-text prepend text-muted" v-if="prependIcon">
        <itf-icon :size="small ? 18 : 20" :name="prependIcon"/>
      </div>
    </slot>

    <input
      :name="`text-field-${_uid}`"
      ref="input"
      autocomplete="off"
      :placeholder="placeholder"
      :class="{ 'form-control-sm': small }"
      class="itf-text-field__input form-control"
      :type="type"
      :value="value"
      :disabled="disabled"
      :readonly="readonly"
      @input="onInput($event.target.value)"
      @keydown="$emit('keydown', $event)"
      @keyup="$emit('keyup', $event)"
      @keypress="$emit('keypress', $event)"
      @blur="$emit('blur', $event)"
      @focus="$emit('focus', $event)"
      @wheel="onWheel"
      @change="$emit('change', $event.target.value)"
      :maxlength="maxlength"
      :min="min"
      :max="max"
      :step="step"
    />
    <div class="input-group-text append text-muted" v-if="postfix">
      {{ postfix }}
    </div>

    <template v-if="clearable && value">
      <slot name="clear">
        <itf-button
          icon
          small
          @click="$emit('input', '')"
        >
          <itf-icon name="close" />
        </itf-button>
      </slot>
    </template>
  </div>

</template>
<script>
import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import { debounce } from '../../helpers/debounce';

export default @Component({
  name: 'itfTextField',
  components: {
    itfIcon,
    itfButton
  }
})
class itfTextField extends Vue {
  @Inject({ default: null }) itemLabel;
  @Model('input') value;
  @Prop(String) prependIcon;
  @Prop(String) placeholder;
  @Prop() step;
  @Prop() min;
  @Prop() max;
  @Prop() maxlength;
  @Prop() postfix;
  @Prop(Boolean) clearable;
  @Prop(Boolean) disabled;
  @Prop(Boolean) readonly;
  @Prop(Boolean) small;
  @Prop({ type: Boolean, default: undefined }) invalid;
  @Prop({ type: Boolean, default: undefined }) valid;
  @Prop({ type: String, default: 'text' }) type;
  @Prop({ type: [Number, String], default: 0 }) delayInput;

  onInput = null;

  created() {
    this.onInput = debounce((val) => this.$emit('input', val), Number(this.delayInput));
  }

  isInvalid() {
    return typeof this.invalid !== 'undefined' ? this.invalid : (this.itemLabel && this.itemLabel.isHasError());
  }

  isSuccess() {
    return typeof this.valid !== 'undefined' ? this.valid : (this.itemLabel && this.itemLabel.isHasSuccess());
  }

  insertTextToCurrentPosition(text) {
    const position = this.$refs.input.selectionStart;
    const value = this.value || '';
    const startText = value.slice(0, position);
    const endText = value.slice(position);
    this.$emit('input', `${startText}${text}${endText}`);
  }

  focus() {
    this.$refs.input.focus();
  }

  blur() {
    this.$refs.input.blur();
  }

  onWheel(event) {
    // prevent value change on scroll
    if (this.type === 'number' && document.activeElement === this.$refs.input) {
      event.preventDefault();
    }
  }
}
</script>
