<template>
  <InputTag
    v-if="multiple"
    ref="input"
    :suffix-icon="_suffixIcon"
    :placeholder="_placeholder"
    :readonly="readonly"
    :disabled="disabled"
    :tags="value"
    :size="size"
    :value="inputValue"
    @click="onClick"
    @blur="onBlur"
    @input="onInput"
    @tagdelete="onTagDelete" />

  <HiveInput
    v-else
    ref="input"
    :suffix-icon="_suffixIcon"
    :placeholder="_placeholder"
    :readonly="readonly"
    :disabled="disabled"
    :value="inputValue"
    :size="size"
    @blur="onBlur"
    @click="onClick"
    @input="onInput" />
</template>

<script>
  import HiveInput from './input';
  import InputTag from '../input-tag';

  export default {
    components: {
      HiveInput,
      InputTag,
    },
    props: {
      multiple: Boolean,
      isFilteringMode: Boolean,
      placeholder: String,
      value: [Array, String],
      size: String,
      suffixIcon: String,
      readonly: Boolean,
      disabled: Boolean,
    },
    data() {
      return {
        inputValue: this.$props.multiple ? '' : this.$props.value,
      };
    },
    computed: {
      _suffixIcon() {
        return this.suffixIcon || this.multiple ? '' : 'carret_down';
      },
      _placeholder() {
        if (this.multiple) {
          return this.value.length ? '' : this.placeholder;
        } else {
          return (this.isFilteringMode && this.value) ? this.value : this.placeholder;
        }
      },
    },
    watch: {
      value(value) {
        if (this.multiple) {

        } else {
          this.inputValue = value;
        }
      },
    },
    methods: {
      onInput(value) {
        this.inputValue = value;
        this.$emit('input', value);
      },
      clearFilter() {
        this.inputValue = '';
      },
      focus() {
        if (this.isFilteringMode) this.inputValue = '';
        this.$refs.input.focus();
      },
      onClick() {
        this.$emit('click');
      },
      onTagDelete(value) {
        this.$emit('tagdelete', value);
      },
      onBlur() {
        if (this.isFilteringMode && !this.multiple && !this.inputValue) this.inputValue = this.value;
        this.$emit('blur');
      },
    },
  };
</script>
