Vue.component('tt-button', {
    //language=Vue
    template: `
      <component :is="href ? 'a' : 'button'"
                 :href="href"
                 :disabled="!href && loading"
                 :class="buttonClasses"
                 class="btn"
                 @click="handleClick">
        <span v-if="loading" class="spinner"></span>
        <template v-else>
          <i v-if="icon" :class="icon"></i>
          {{ text }}
        </template>
      </component>
    `,
    props: {
        sm: {type: Boolean, default: false},
        icon: {type: String, required: false},
        text: {type: String, required: false},
        href: {type: String, required: false},
        additionalClass: {type: String, required: false},
        confirmText: {type: String, required: false},
        loading: {type: Boolean, default: false},
    },
    computed: {
        buttonClasses() {
            const classes = [];
            if (this.sm) classes.push('btn-sm');
            if (this.loading) classes.push('btn-loading');
            if (this.additionalClass) classes.push(...this.additionalClass.split(' '));
            return classes;
        }
    },
    methods: {
        handleClick(event) {
            if (this.loading || (this.confirmText && !confirm(this.confirmText))) {
                event.preventDefault();
                return;
            }
            this.$emit('click', event);
        }
    }
});