<template>
  <button
    :disabled="loading"
    :class="className"
    :type="buttonType"
    role="button"
    v-on="$listeners"
    :style="`background-color: ${outline ? 'transparent' :color}; border-color: ${color}; color: ${outline ? color : false};`"
  >
    <eb-icon
      v-if="(icon !== null && !iconRight) && !loading"
      :type="icon"
      :family="iconFamily"
    />
    <slot v-if="!iconOnly && !loading"></slot>
    <eb-icon
      v-if="icon !== null && iconRight && !iconOnly && !loading"
      :type="icon"
      :family="iconFamily"
    />
  </button>
</template>

<script>
import EbIcon from '../eb-icon/eb-icon';
import ButtonMixin from '../../../mixins/button-mixin';

export default {
  name: 'EbButton',
  components: { EbIcon },
  mixins: [ButtonMixin],
  props: {
    loading: {
      description: 'Is Button loading',
      default: false,
      type: Boolean
    },
    submit: {
      description: 'Button type of Submit',
      default: false,
      type: Boolean
    },
    reset: {
      description: 'Button type of Reset',
      default: false,
      type: Boolean
    },
    iconRight: {
      description: 'Position of Button Icon is Right',
      default: false,
      type: Boolean
    },
    kind: {
      validator: val =>
        [
          'link',
          'default',
          'primary',
          'secondary',
          'ghost',
          'danger',
          'dark',
          'success',
          'info',
          'warning',
          'blue',
          'azure',
          'indigo',
          'purple',
          'pink',
          'red',
          'orange',
          'yellow',
          'lime',
          'green',
          'teal',
          'cyan',
          'gray',
          'gray-dark',
          'facebook',
          'twitter',
          'google',
          'youtube',
          'vimeo',
          'instagram',
          'pinterest',
          'bitbucket'
        ].includes(val)
    }
  },

  computed: {
    buttonType() {
      if (this.reset) return 'reset';
      return this.submit ? 'submit' : 'button';
    },

    className() {
      return [
        'btn',
        this.outline ? 'btn-outline-' + this.kind : 'btn-' + this.kind,
        this.small && !this.large
          ? 'btn-sm'
          : this.large && !this.small
          ? 'btn-lg'
          : '',
        {
          disabled: this.disabled,
          'btn-loading': this.loading,
          'btn-plain': this.plain,
          'btn-pill': this.pill,
          'btn-square': this.square,
          'btn-block': this.block,
          'btn-icon': this.iconOnly
        }
      ];
    }
  }
};
</script>


