// noinspection JSCheckFunctionSignatures
Vue.component('tt-button', {
    //language=Vue
    template: `
      <div>
        <template v-if="href">
          <a :href="href" class="btn" :class="buttonClasses" @click="handleClick">
            <template v-if="loading">
              <span class="spinner"></span>
            </template>
            <template v-else>
              <i v-if="icon" :class="icon"></i>
              {{text}}
            </template>
          </a>
        </template>
        <template v-else>
          <button @click="handleClick" class="btn" :class="buttonClasses" :disabled="loading">
            <template v-if="loading">
              <span class="spinner"></span>
            </template>
            <template v-else>
              <i v-if="icon" :class="icon"></i>
              {{text}}
            </template>
          </button>
        </template>
      </div>
    `,
    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 = {
                'btn-sm': this.sm,
                'btn-loading': this.loading
            }

            if (this.additionalClass) {
                this.additionalClass.split(' ').forEach(className => {
                    classes[className] = true
                })
            }

            return classes
        }
    },
    methods: {
        handleClick(event) {
            if (this.loading) return event.preventDefault();
            if (typeof this.confirmText === 'string' && !confirm(this.confirmText)) return event.preventDefault();

            this.$emit('click', event)
        }
    }
})