<template>
  <div class="border-top mt-5">
    <div class="d-flex justify-content-between my-2">
      <b-button
        size="lg"
        variant="outline-primary"
        @click="backAction"
        :data-qa="`svTransfer-footerNavigator-${(isEntryPoint && 'cancel') || 'back'}-btn`"
      >
        {{ currentRoute.previous }}
      </b-button>
      <b-button
        size="lg"
        variant="primary"
        :disabled="isBusy"
        @click="nextAction"
        class="d-flex align-items-center"
        :data-qa="`svTransfer-footerNavigator-${(isFinalStep && 'complete') || 'next'}-btn`"
      >
        <span>{{ currentRoute.next }}</span>
        <b-spinner v-show="isBusy" small class="ml-2" />
      </b-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterNavigator',
  props: {
    isBusy: { type: Boolean, default: true },
    currentRoute: { type: Object, default: () => ({}) },
  },
  computed: {
    isEntryPoint() {
      return this.currentRoute.id === 1
    },
    isFinalStep() {
      return Boolean(this.currentRoute.complete)
    },
  },
  methods: {
    backAction() {
      this.isEntryPoint ? this.$router.push({ name: 'SvTransfer' }) : this.$emit('navigate-previous')
    },
    nextAction() {
      this.$emit('navigate-next', this.isFinalStep)
    },
  },
}
</script>
