<template>
  <label :for="name" class="icon-input" :class="[inputClass, { 'icon-input--error': hasErrors } ]">
    <span class="icon-input__label" v-if="label" v-text="label"></span>
    <div class="icon-input__wrapper">
      <input
        :type="inputType"
        :name="name"
        :id="name"
        :placeholder="inputPlaceholder"
        :value="value"
        :required="required"
        :max="max"
        :min="min"
        step="any"
        @input="$emit('input', $event.target.value)"
        class="icon-input__input"
        @blur="resetErrors"
      >
      <div class="icon-input__image-wrapper">
        <component :is="iconImg" >
      </div>
      <transition name="fade">
        <img v-if="hasErrors" :src="errorImg" alt="error" class="icon-input__image icon-input__image--error">
      </transition>
    </div>
    <transition name="fade">
      <template v-if="hasErrors">
        <p
          class="icon-input__message icon-input__message--error"
          role="alert"
          v-for="(message, index) in errors"
          :key="index"
          v-text="message"
        ></p>
      </template>
    </transition>
  </label>
</template>

<script>
import size from 'lodash/size';

export default {
  name: 'icon-input',
  props: {
    name: {
      type: String,
      required: true,
    },
    inputType: {
      type: String,
      required: false,
      default: 'text',
    },
    inputStyle: {
      type: String,
      required: false,
      default: 'boxed',
    },
    label: {
      type: String,
      required: false,
    },
    value: {
      type: [Number, String],
      required: true,
    },
    placeholder: {
      type: String,
      required: false,
    },
    required: {
      type: Boolean,
      required: false,
      default: false,
    },
    max: {
      type: Number,
      required: false,
    },
    min: {
      type: Number,
      required: false,
    },
    errors: {
      type: Array,
      required: false,
    },
    errorImg: {
      type: String,
      required: false,
    },
    iconImg: {
      type: String,
      required: false,
    }
  },
  computed: {
    hasErrors() {
      return size(this.errors) > 0;
    },
    inputClass() {
      return this.inputStyle === 'boxed' ? 'icon-input--boxed' : 'icon-input--line';
    },
    inputPlaceholder() {
      return this.placeholder ? this.placeholder : '';
    }
  },
  methods: {
    resetErrors() {
      this.$emit('reset-errors', this.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-input {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 30px;
  margin-bottom: 3rem;
  &__label {
    @include body-small(medium, label, $color-black-primary, tertiary, quaternary);
    margin-bottom: 5px;
    margin-bottom: .5rem;
    transition: color transition(fast);
  }
  &__wrapper {
    position: relative;
  }
  &__image-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    width: 5rem;
    height: 5rem;
  }
  &__image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    &--error {
      right: 15px;
    }
    &--icon {
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  &__input {
    width: 100%;
    background-color: transparent;
    padding: 0;
    border: none;
    text-indent: 60px;
    text-indent: 6rem;
    height: 50px;
    height: 5rem;
    outline: none;
    transition: all transition(fast);
    caret-color: $color-primary;
    @include body-normal(regular, placeholder, $color-black-primary, tertiary, quaternary);
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      @include body-normal(regular, placeholder, $color-black-primary, tertiary, quaternary);
      color: rgba($color-black-primary, .5);
    }
    &::-moz-placeholder { /* Firefox 19+ */
      @include body-normal(regular, placeholder, $color-black-primary, tertiary, quaternary);
      color: rgba($color-black-primary, .5);
    }
    &:-ms-input-placeholder { /* IE 10+ */
      @include body-normal(regular, placeholder, $color-black-primary, tertiary, quaternary);
      color: rgba($color-black-primary, .5);
    }
    &:-moz-placeholder { /* Firefox 18- */
      @include body-normal(regular, placeholder, $color-black-primary, tertiary, quaternary);
      color: rgba($color-black-primary, .5);
    }
  }
  &__message {
    position: absolute;
    margin-bottom: 0;
    left: 0;
    bottom: -30px;
    bottom: -3rem;
    @include body-small;
    &--error {
      color: $color-message-tertiary;
    }
  }
  &--boxed {
    input {
      background-color: $white;
      border-radius: border-radius(primary);
      box-shadow: box-shadow(secondary);
      border-bottom: 2px solid $white;
      &:focus {
        border-bottom-color: $color-primary;
      }
    }
    .icon-input__image-wrapper {
      background-color: $color-grey-septenary;
      border-top-left-radius: border-radius(primary);
      border-bottom-left-radius: border-radius(primary);
    }
  }
  &--line {
    input {
      border-bottom: border(solid-secondary);
      &:focus {
        border-bottom-color: $color-primary;
      }
    }
    .icon-input__message {
      left: 10px;
      left: 1rem;
    }
  }
  &--error {
    .icon-input__label {
      color: $color-message-tertiary;
    }
    .icon-input__input {
      outline: none;
      border-bottom-color: $color-message-tertiary;
    }
  }
}
</style>

