<template>
  <div
    class="m-input">
    <div
      :class="getCustomClass()"
      class="form-group">
      <!-- Label -->
      <label
        :for="$attrs.id"
        class="mb-1 pl-1">
        {{ label }}
      </label>
      <div class="input-group">
        <!-- Input -->
        <input
          v-bind="$attrs"
          :value="value"
          :disabled="disabled || loading"
          class="form-control"
          v-on="{...$listeners, input: event => $emit('input', event.target.value)}">

        <!-- Images -->
        <m-input-images
          v-if="check || loading || close"
          :check="check"
          :loading="loading"
          :close="close"
          @erase-text="eraseText" />
      </div>

      <!-- Notifications -->
      <m-input-notifications
        :id="'form-notification_' + $attrs.id"
        :active-element="activeElement()"
        :notification-text="notificationText"
        :notification-warning="notificationWarning"
        :notification-error="notificationError"
        :check="check"
        :loading="loading"
        :close="close"
        :disabled="disabled" />
    </div>
  </div>
</template>

<script>
import MInputImages from './components/MInputImages.vue';
import MInputNotifications from './components/MInputNotifications.vue';

export default {
  name: 'MInput',
  components: {
    MInputImages,
    MInputNotifications,
  },
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    notificationText: {
      type: String,
      default: '',
    },
    customClass: {
      type: String,
      default: '',
    },
    notificationWarning: {
      type: Boolean,
      default: false,
    },
    notificationError: {
      type: Boolean,
      default: false,
    },
    check: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    getCustomClass() {
      let formGroupClass = `form-group--${this.activeElement()}`;
      formGroupClass += (this.customClass !== '') ? ` ${this.customClass}` : '';
      return formGroupClass;
    },
    activeElement() {
      if (this.notificationError) {
        return 'error';
      }
      if (this.check) {
        return 'check';
      }
      if (this.loading) {
        return 'loading';
      }
      if (this.close) {
        return 'close';
      }
      if (this.disabled) {
        return 'disabled';
      }
      return 'default';
    },
    eraseText() {
      this.$emit('input', '');
    },
  },
};
</script>

<style lang="scss" scoped>
.form-group {
  min-height: 100px;

  label {
    font-size: 14px;

    color: #002856;
  }

  input {
    height: 48px;

    font-size: 16px;

    color: #333;

    background-color: transparent;
    border-color: #d3dce6;
    border-radius: 4px;

    &::placeholder {
      color: #959698;
    }
  }

  .custom-select:not(:last-child),
  .input-group > .form-control:not(:last-child) {
    border-radius: 4px;
  }
}

/* Check */
.form-group.form-group--check {
  label {
    color: #4caf50;
  }

  input {
    border-right: 0;
  }
}

/* Loading */
.form-group.form-group--loading {
  label  {
    color: #607996;
  }
}

/* Close */
.form-group.form-group--close {
  label {
    color: #f41b00;
  }

  input {
    border-right: 0;
  }
}

/* Close */
.form-group.form-group--disabled {
  label,
  input {
    color: #a1b1c4;

    &::placeholder {
      color: #a1b1c4;
    }
  }
}
</style>
