<template>
  <button
    class="vc-button"
    :disabled="disabled"
    :class="classes"
    @click="handleClick"
  >
    <span class="vc-button--content">
      <i
        v-if="icon"
        :class="icon"
        class="content-icon"
      />
      <slot />
    </span>
    <span
      v-if="loading"
      class="vc-button--loader"
    >
      <i class="vc-icon-load text-current" />
    </span>
  </button>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { ButtonType, ButtonColor, ButtonSize } from './VcButton.types'

const CLASS_DISABLED = 'vc-button--disabled'
const CLASS_FOR_SIZE = 'vc-button-size--'
const CLASS_FOR_TYPE = 'vc-button-type--'
const CLASS_FOR_COLOR = 'vc-button-color--'
const CLASS_FOR_LOADING = 'is-loading'

const DEFAULT_SIZE = 'middle'
const DEFAULT_TYPE = 'default'
const DEFAULT_COLOR = 'primary'

export default defineComponent({
  name: 'VcButton',
  props: {
    size: {
      type: String as PropType<ButtonSize>,
      default: DEFAULT_SIZE
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String as PropType<ButtonType>,
      default: DEFAULT_TYPE
    },
    icon: {
      type: String,
      default: ''
    },
    color: {
      type: String as PropType<ButtonColor>,
      default: DEFAULT_COLOR
    },
    loading: {
      type: Boolean,
      default: false
    },
    dataTestName: {
      type: String,
      default: 'vc-button'
    }
  },
  emits: ['click'],
  computed: {
    classes (): (string)[] {
      const disabled = this.disabled ? CLASS_DISABLED : ''
      const loading = this.loading ? CLASS_FOR_LOADING : ''
      const sizeClass = CLASS_FOR_SIZE + this.size
      const typeClass = CLASS_FOR_TYPE + this.type
      const colorClass = CLASS_FOR_COLOR + this.color

      return [
        sizeClass,
        typeClass,
        colorClass,
        disabled,
        loading
      ]
    }
  },
  methods: {
    handleClick (evt: MouseEvent): void {
      if (!this.loading && !this.disabled) {
        this.$emit('click', evt)
      }
    }
  }
})
</script>

<style lang="scss" scoped>
@import "VcButton";
</style>
