<template>
  <t-button
    :to="to"
    :variant="variant"
    :disabled="disabled"
    :class="`text-${textAlign} ${fluid ? 'w-full' : ''} ${inline ? 'inline-block' : 'block'} ${classes}`"
    v-ripple="rippleColor"
  >
    <slot></slot>
  </t-button>
</template>

<script>
// Color
import Color from 'color'
/**
 * Button component
 */
export default {
  name: 'Button',
  props: {
    /**
     * 'To', if button is a router-link
     */
    to: {
      type: String,
      default: undefined
    },
    /**
     * Tailwind variant for the button
     */
    variant: {
      type: String,
      default: ''
    },
    /**
     * Define text alignment
     */
    textAlign: {
      type: String,
      default: 'center'
    },
    /**
     * Classes to add to the t-button
     */
    classes: {
      type: String,
      default: ''
    },
    /**
     * Define if button is full width
     */
    fluid: {
      type: Boolean,
      default: false
    },
    /**
     * Define if button is disabled
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * Define if button is displayed as inline-block
     */
    inline: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    /**
     * Generate ripple color based on this.computedVariant
     */
    rippleColor: function () {
      let rippleColor
      switch (this.variant) {
        case 'primary':
          rippleColor = Color('red').lighten(0.8).rgb().alpha(0.30).string()
          break
        case 'secondary':
          rippleColor = Color('red').lighten(0.8).rgb().alpha(0.15).string()
          break
        case 'warning':
          rippleColor = Color('red').lighten(0.8).rgb().alpha(0.15).string()
          break
        case 'error':
          rippleColor = Color('red').lighten(0.8).rgb().alpha(0.15).string()
          break
        default:
          rippleColor = Color('red').lighten(0.8).rgb().alpha(0.30).string()
          break
      }
      return rippleColor
    }
  }
}
</script>
