<template>
  <div v-can:view="'auto-ship'">
    <div class="bg-secondary p-2 lifted">
      <b-container fluid="lg" class="text-white px-0 py-2">
        <div class="d-flex align-items-center">
          <b-button
            variant="link"
            :to="{ name: 'AutoshipDashBoard' }"
            data-qa="autoship-autoshipTemplate-backToAutoshipList-btn"
          >
            <icon name="back-arrow" class="icon-size-3 text-white" />
          </b-button>
          <b-img class="ml-2 mr-3 d-none d-md-block icon-size-4" :src="companyLogo" />
          <span class="font-size-3">{{ $t(Title) }}</span>
        </div>
      </b-container>
    </div>
    <div v-if="!showCard" class="container pt-3">
      <router-view
        :current-route="currentRoute()"
        :previous-route="previousRoute()"
        :next-route="nextRoute()"
        :navigate-next="validateAndContinue"
        :navigate-previous="previous"
        ref="routeView"
      />
    </div>
    <b-card v-else class="container mt-4">
      <router-view
        :current-route="currentRoute()"
        :previous-route="previousRoute()"
        :next-route="nextRoute()"
        :navigate-next="validateAndContinue"
        :navigate-previous="previous"
        ref="routeView"
      />
      <footer-navigator
        v-if="showFooter"
        @submit="validateAndContinue"
        @back="previous"
        :previous-route="previousRoute()"
        :next-route="nextRoute()"
        :current-route="currentRoute()"
      />
    </b-card>
  </div>
</template>

<script>
import { AUTOSHIP_SUBSCRIPTION_LIST } from '@/config/url-prefix'
import FooterNavigator from '../blocks/FooterNavigator'
import autoshipRouteMixin from '../../../mixins/autoshipRouteMixin'
import { mapGetters } from 'vuex'

export default {
  name: 'AutoshipTemplate',
  mixins: [autoshipRouteMixin],
  components: { FooterNavigator },
  mounted() {
    this.afterLoading('loadingCart').then(() => {
      this.initRouting(true) // initiate the routing stack
    })
  },
  data() {
    return {
      companyLogo: this.$const.constImage.COMPANY_LOGO,
    }
  },
  computed: {
    ...mapGetters(['afterLoading']),
    Title() {
      return this.$store.state.route.meta.title
    },
    showFooter() {
      return this.$route.meta.showFooter !== undefined ? this.$route.meta.showFooter : true
    },
    showCard() {
      return this.$route.meta.showCard !== undefined ? this.$route.meta.showCard : true
    },
  },
  methods: {
    validateAndContinue(skipRouting = false) {
      // Map validation on component level
      let componentValidationFunction = this.$refs.routeView.validateAndSubmit

      // If cant find the validation method, set default function
      if (typeof componentValidationFunction !== 'function') {
        componentValidationFunction = () => true
      }
      Promise.resolve(componentValidationFunction()).then(valid => {
        if (valid) {
          // Map validation on route mixin level
          let routeValidationFunction = this.currentRoute().validate
          // If cant find the validation method, set default function
          if (typeof routeValidationFunction !== 'function') {
            routeValidationFunction = () => valid
          }
          // If pass move to next route
          return Promise.resolve(routeValidationFunction()).then(valid => {
            if (valid && !skipRouting) {
              this.next()
            }
          })
        }
      })
    },
  },
}
</script>
