export default {
  name: 'BaseButton',
  props: {
    text: String,
    type: {
      type: String,
      default: 'button',
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    apperance: {
      type: String,
      default: 'primary',
      validator(value) {
        return (
          [
            'primary',
            'outline',
            'white',
            'success',
            'confirm',
            'cancel',
            'warning',
            'error',
            'neutral-black',
            'neutral-white',
          ].indexOf(value) !== -1
        );
      },
    },
    full: {
      type: Boolean,
      default: false,
    },
    square: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    href: {
      type: String,
    },
  },
  computed: {
    hasDefaultSlot() {
      return !!this.$slots.default;
    },
    classObject() {
      return {
        'btn-primary': this.apperance === 'primary',
        'btn-outline': this.apperance === 'outline',
        'btn-white': this.apperance === 'white',
        'btn-success': this.apperance === 'success',
        'btn-confirm background-white': this.apperance === 'confirm',
        'btn-cancel background-white': this.apperance === 'cancel',
        'btn-error': this.apperance === 'error',
        'btn-warning': this.apperance === 'warning',
        'btn-info': this.apperance === 'info',
        'btn-small': this.size === 'small',
        'btn-medium': this.size === 'medium',
        'btn-large': this.size === 'large',
        'btn-small-square': this.size === 'small' && this.square,
        'btn-medium-square': this.size === 'medium' && this.square,
        'btn-large-square': this.size === 'large' && this.square,
        'btn-full': this.full,
        'btn-loading': this.loading,
        'btn-neutral-black': this.apperance === 'neutral-black',
        'btn-neutral-white': this.apperance === 'neutral-white',
      };
    },
  },
};
