<template>
  <div class="border-top mt-3">
    <div class="d-flex justify-content-between my-2">
      <b-button
        v-if="showBackButton"
        size="lg"
        data-qa="back-btn"
        variant="outline-primary"
        @click="$emit('navigate-previous')"
      >
        {{ previousRoute.previous }}
      </b-button>

      <template>
        <b-button
          v-if="isUpdateRoute"
          size="lg"
          :disabled="isBusy"
          variant="info-green"
          data-qa="update-btn"
          class="d-flex align-items-center"
          @click="$emit('navigate-next', true)"
        >
          <b-spinner v-show="isBusy" small class="mr-2" />
          <span>{{ currentRoute.update }}</span>
        </b-button>

        <b-button
          v-else-if="isCompleteRoute"
          size="lg"
          variant="primary"
          :disabled="isBusy"
          data-qa="complete-btn"
          class="d-flex align-items-center"
          @click="$emit('navigate-next', true)"
        >
          <span>{{ currentRoute.complete }}</span>
          <b-spinner v-show="isBusy" small class="ml-2" />
        </b-button>
        <b-button
          v-else-if="showNextButton"
          size="lg"
          variant="primary"
          data-qa="next-btn"
          @click="$emit('navigate-next')"
        >
          {{ nextRoute.next }}
        </b-button>
      </template>
    </div>
  </div>
</template>

<script>
import { getValue } from '@/helpers/variable-handling'
export default {
  name: 'FooterNavigator',
  props: {
    nextRoute: { type: Object },
    currentRoute: { type: Object },
    previousRoute: { type: Object },
    isUpdate: { type: Boolean, required: true },
    isBusy: { type: Boolean, default: false },
  },
  computed: {
    showBackButton() {
      return getValue(this.nextRoute, 'previous')
    },
    showNextButton() {
      return getValue(this.nextRoute, 'next') && !getValue(this.nextRoute, 'hideNext')
    },
    isCompleteRoute() {
      return getValue(this.currentRoute, 'complete')
    },
    isUpdateRoute() {
      return getValue(this.currentRoute, 'update') && this.isUpdate
    },
  },
}
</script>
