<template>
  <div class="border-top">
    <div class="m-2 d-flex justify-content-between">
      <b-button
        variant="outline-primary"
        @click="$emit('back')"
        size="lg"
        v-if="previousRoute && previousRoute.previous !== ''"
        data-qa="back-btn"
      >
        {{ previousRoute.previous }}
      </b-button>
      <b-button
        size="lg"
        variant="primary"
        @click="$emit('submit')"
        v-if="
          !$helpers.getValue(nextRoute, 'hideNext', false) && !isCompleteRoute && nextRoute && nextRoute.next !== ''
        "
        data-qa="next-btn"
      >
        {{ nextRoute.next }}
      </b-button>
      <b-button
        size="lg"
        variant="primary"
        @click="$emit('submit', isCompleteRoute)"
        v-if="isCompleteRoute"
        data-qa="complete-btn"
      >
        {{ nextRoute.complete }}
      </b-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterNavigator',
  computed: {
    isCompleteRoute() {
      return this.$helpers.isSet(this.currentRoute, 'complete')
    },
  },
  props: {
    nextRoute: { type: Object },
    previousRoute: { type: Object },
    currentRoute: { type: Object },
  },
}
</script>
