<template>
  <ValidationProvider v-slot="{ errors }" :name="name" :rules="rules">
    <div class="skillboxform-input">
      <label :for="id" class="skillboxform-input__label">{{ label }}</label>
      <input
        :value="value"
        :class="{ 'skillboxform-input__input--error': errors.length }"
        v-bind="$attrs"
        class="change-form__email skillbox-input skillboxform-input__input"
        autocomplete="off"
        :id="id"
        @input="$emit('input', $event.target.value)"
      />

      <small :data-cy="localErrorsCy" class="skillboxform-input__error" v-if="errors.length">{{ errors[0] }}</small>

      <small :data-cy="remoteErrorsCy" class="skillboxform-input__error" v-for="error in remoteErrors" :key="error">{{
        error
      }}</small>
    </div>
  </ValidationProvider>
</template>

<script>
import { extend, localize, ValidationProvider } from 'vee-validate';
import de from 'vee-validate/dist/locale/de.json';
import { required } from 'vee-validate/dist/rules';

extend('required', required);

localize('de', {
  ...de,
  names: {
    password: 'Passwort',
    email: 'E-Mail',
    coupon: 'Coupon-Code',
  },
});

// todo: use this in beta-login, license-activation and PasswordChangeForm
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    remoteErrors: {
      type: Array,
      default: undefined,
    },
    name: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    rules: {
      type: String,
      default: 'required',
    },
  },
  components: {
    ValidationProvider,
  },
  inheritAttrs: false,
  computed: {
    id() {
      return this.$attrs.id || this._uid;
    },
    remoteErrorsCy() {
      return `${this.name}-remote-errors`;
    },
    localErrorsCy() {
      return `${this.name}-local-errors`;
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';
</style>
