<template>
  <div class="form-group">
    <label v-if="label" class="form-label" :for="id">
      {{ label }}
      <span v-if="$attrs.required !== undefined" class="form-required">*</span>
    </label>

    <div :class="{'input-icon': iconLeft || iconRight }">
      <span class="input-icon-addon" v-if="iconLeft">
        <eb-icon :type="icon" :family="iconType"/>
      </span>

      <BaseInput
        class="form-control"
        :error="error"
        :id="id"
        :type="type"
        v-bind="$attrs"
        v-on="$listeners"
        @input="$emit('update', $event.target.value)"
      />

      <span class="input-icon-addon" v-if="iconRight">
        <eb-icon :type="icon" :family="iconType"/>
      </span>
    </div>

    <div v-if="hasError" class="invalid-feedback d-block">
      <slot name="invalid-feedback">{{ getError }}</slot>
    </div>
  </div>
</template>

<script>
import EbIcon from '../eb-icon/eb-icon';
import BaseInput from '../../atoms/base-input';
import ErrorMixin from '../../../mixins/error-mixin';

export default {
  name: 'EbTextInput',
  components: { BaseInput, EbIcon },
  mixins: [ErrorMixin],
  model: {
    event: 'update'
  },
  inheritAttrs: false,
  props: {
    id: {
      type: String,
      default() {
        return `text-input-${this._uid}`;
      }
    },
    type: {
      type: String,
      default: 'text'
    },
    label: String,
    iconLeft: Boolean,
    iconRight: Boolean,
    icon: String,
    iconType: {
      validator: prop => typeof prop === 'string' || prop === null,
      default: null
    }
  }
};
</script>

<style scoped>
.form-control.is-invalid,
input.is-invalid {
  border-color: #cd201f;
  padding-right: calc(1.6em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23cd201f' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23cd201f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
  background-repeat: no-repeat;
  background-position: center right calc(0.4em + 0.1875rem);
  background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}

.el-table th div {
  padding-left: 0;
  padding-right: 0;
}

.cell > .form-group {
  margin-bottom: 0;
  vertical-align: bottom;
  padding-top: 0.75rem;
}
.input-icon-addon .eb-icon {
  cursor: pointer;
}
</style>
