<template>
  <button @click="onClick" :disabled="isDisabled" :class="style">
    <slot />
  </button>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import ClickEvent from '../../core/events/ClickEvent'

type BaseButtonType = 'selected' | 'invisible' | 'primary' | 'secondary' | 'default' | 'link' | 'destructive' | 'important' | 'assertive'

@Component({
  name: 'base-button'
})
export default class BaseButton extends Vue {
  @Prop({ default: 'default' }) readonly type!: BaseButtonType
  @Prop({ default: false }) readonly disabled!: boolean
  @Prop({ default: false }) readonly waiting!: boolean

  get isDisabled () {
    return this.disabled !== false || this.waiting !== false
  }

  get style () {
    return {
      button: true,
      'has-text-weight-semibold': this.type === 'primary' || this.type === 'destructive' || this.type === 'important' || this.type === 'assertive',
      'is-loading': this.waiting !== false,
      'is-light': this.type === 'default',
      'is-primary': this.type === 'primary',
      'is-text': this.type === 'link',
      'is-danger': this.type === 'destructive',
      'is-info': this.type === 'important',
      'is-success': this.type === 'selected',
      'is-warning': this.type === 'assertive',
      'is-white': this.type === 'invisible'
    }
  }

  /**
   * onClick emit a ClickEvent<void> when the button is clicked.
   */
  onClick () {
    const event = new ClickEvent<void>()
    this.$emit('click', event)
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
$button-padding-vertical: 0;
@import "bulma/sass/elements/button.sass";
</style>
