<template>
  <a
    href="#"
    class="button"
    :class="{ 'is-loading': loading }"
    @click.prevent="click"
    v-click-outside="resetTap"
  >
    <span v-show="confirmMessage">{{ confirmMessage }}</span>
    <span v-show="!confirmMessage">
      <slot></slot>
    </span>
  </a>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import ClickOutside from 'vue-click-outside'

@Component({
  directives: {
    ClickOutside
  }
})
export default class ConfirmButton extends Vue {
  public loading: boolean = false
  public firstTap: boolean = true
  public resetTap(): void {
    this.firstTap = true
  }
  public click(): void {
    if (this.loading) {
      return
    }
    if (this.firstTap) {
      this.firstTap = false
      return
    }
    this.loading = true
    this.firstTap = true
    this.$emit('confirm', () => {
      this.loading = false
    })
  }

  public get confirmMessage(): string {
    return this.firstTap ? '' : 'Confirmer pour valider'
  }
}
</script>

