<template>
  <div>
    <checkout-steps-template
      :steps="selectedOrder"
      :current-route-index="currentRouteIndex()"
      v-if="routeLoadingCompleteWithDelay"
    >
      <router-view
        :current-route="currentRoute()"
        :previous-route="previousRoute()"
        :next-route="nextRoute()"
        :navigate-next="validateAndContinue"
        :navigate-previous="previous"
        :is-logged-in="isLoggedIn"
        ref="routeView"
      />
      <footer-navigation
        @submit="validateAndContinue"
        @back="previous"
        :previous-route="previousRoute()"
        :next-route="nextRoute()"
        :current-route="currentRoute()"
      >
        <template slot="errors">
          <b-row class="my-2">
            <b-col class="d-flex flex-column justify-content-center text-right text-danger font-weight-bold">
              <span v-if="getErrors('cartError')">{{ getErrors('cartError') }}</span>
            </b-col>
          </b-row>
        </template>
      </footer-navigation>
    </checkout-steps-template>
    <div
      v-show="
        !routeLoadingCompleteWithDelay ||
          isLoading([
            'productsAddingToCart',
            'loadingCart',
            'getEnrolmentCode',
            'postEnrolmentCode',
            'getEnrolmentTypes',
            'saveTempEnrolment',
            'byDzyne-products',
            'createAutoshipSales',
            'loadingCartProductEligible',
          ])
      "
      ref="loader"
      class="loader loading"
    ></div>
  </div>
</template>
<script>
import CheckoutStepsTemplate from '@@/app/_global/components/templates/CheckoutStepsTemplate'
import CheckoutRoutingMixin from '@@/app/_global/mixins/checkoutRoutingMixin'
import FooterNavigation from '@@/app/_global/components/elements/FooterNavigation'
import Loader from '@@/app/_global/components/elements/lottie/loader.json'
import lottie from 'lottie-web'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'CheckoutTemplate',
  components: { CheckoutStepsTemplate, FooterNavigation },
  mixins: [CheckoutRoutingMixin],
  computed: {
    ...mapGetters(['getErrors', 'isLoading']),
  },
  async mounted() {
    this.$nextTick(async () => {
      await lottie.loadAnimation({
        container: this.$refs.loader,
        renderer: 'svg',
        loop: true,
        animationData: Loader,
      })
    })
  },
  methods: {
    ...mapActions(['guestLogin', 'clearShoppingData']),
    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>
