export default {
  name: 'BaseSelect',
  inheritAttrs: false,
  props: {
    label: {
      type: String,
    },
    description: {
      type: String,
    },
    error: {
      type: String,
    },
    valid: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classObject() {
      return {
        'field-disabled': this.disabled,
        'field-required': this.required,
        'field-error': this.error,
        'field-valid': this.valid,
        'field-small': this.size === 'small',
        'field-medium': this.size === 'medium',
        'field-large': this.size === 'large',
      };
    },
  },
  mounted() {
    const selectElement = this.$refs.select;
    if (!selectElement.value && selectElement.children[0]) {
      selectElement.children[0].selected = true;
      this.$emit('input', selectElement.value);
    }
  },
  methods: {
    onChange(event) {
      const selectedValue = event.target.value;
      this.$emit('input', selectedValue);
      this.$emit('change', selectedValue);
    },
    onFocusout(event) {
      const selectedValue = event.target.value;
      this.$emit('focusout', selectedValue);
    },
  },
};
