<template>
  <div class="container footer-navigation mt-5 mb-5">
    <slot name="errors"></slot>
    <b-row align-h="between">
      <b-col cols="auto">
        <b-button
          variant="primary"
          @click="$emit('back')"
          size="md"
          v-if="
            $helpers.getValue(currentRoute, 'hidePrevious', false) !== true &&
              previousRoute &&
              $helpers.isSet(previousRoute, 'previous') &&
              previousRoute.previous !== ''
          "
        >
          {{ previousRoute.previous }}
        </b-button>
      </b-col>
      <b-col cols="auto">
        <b-button
          size="md"
          variant="primary"
          @click="$emit('submit')"
          v-if="
            !$helpers.getValue(nextRoute, 'hideNext', false) &&
              !isCompleted &&
              nextRoute &&
              nextRoute.next !== undefined &&
              nextRoute.next !== ''
          "
        >
          {{ nextRoute.next }}
        </b-button>
        <b-button size="md" variant="primary" @click="$emit('submit', isCompleted)" v-if="showCompleteButton">
          {{ currentRoute.complete }}
        </b-button>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'FooterNavigator',
  computed: {
    ...mapGetters(['getCurrentPaymentStatus', 'isOrderComplete']),
    ...mapGetters('3rdPartyCheckoutEnrolment', ['getSkipEnrolmentPrivilege']),
    isCompleted() {
      return (
        this.$helpers.isSet(this.currentRoute, 'complete') &&
        this.$helpers.getValue(this.currentRoute, 'complete') !== ''
      )
    },
    showCompleteButton() {
      return this.getSkipEnrolmentPrivilege ? false : this.isCompleted
    },
  },
  props: {
    nextRoute: { type: Object },
    previousRoute: { type: Object },
    currentRoute: { type: Object },
  },
}
</script>
