import Vue from 'vue'
import { VBtn } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntButton',
  components: { VBtn },
  props: {
    label: {
      type: String,
      default: undefined
    },
    color: {
      type: String,
      default: undefined
    },
    icon: {
      type: String,
      default: undefined
    },
    to: {
      type: [Object, String],
      default: undefined
    },
    href: {
      type: String,
      default: undefined
    },
    target: {
      type: String,
      default: undefined
    },
    depressed: {
      type: Boolean,
      default: false
    },
    rounded: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    outlined: {
      type: Boolean,
      default: false
    },
    block: {
      type: Boolean,
      default: false
    },
    plain: {
      type: Boolean,
      default: false
    },
    tile: {
      type: Boolean,
      default: false
    },
    text: {
      type: Boolean,
      default: false
    },
    small: {
      type: Boolean,
      default: false
    },
    large: {
      type: Boolean,
      default: false
    },
    xLarge: {
      type: Boolean,
      default: false
    },
    xSmall: {
      type: Boolean,
      default: false
    },
    iconReverse: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <v-btn
      v-bind="$attrs"
      :color="color"
      :to="to"
      :href="href"
      :target="target"
      :depressed="depressed"
      :disabled="disabled"
      :outlined="outlined"
      :rounded="rounded"
      :block="block"
      :tile="tile"
      :text="text"
      :plain="plain || text"
      :small="small"
      :large="large"
      :x-large="xLarge"
      :x-small="xSmall"
      :icon="!!icon && !label"
      :ripple="false"
      :class="{ 'v-btn--active': plain || text }"
      class="snt-button"
      v-on="$listeners">
      <div class="snt-button__container">
        <slot :attrs="{ icon, label, text, iconReverse, small }">
          <snt-icon
            v-if="icon && !iconReverse"
            :left="!!label"
            :small="text && small">
            {{ icon }}
          </snt-icon>
          {{ label }}
          <snt-icon
            v-if="icon && iconReverse"
            :right="!!label"
            :small="text && small">
            {{ icon }}
          </snt-icon>
        </slot>
      </div>
    </v-btn>
  `
})
