<template>
  <div v-can:view="'my-bundle'">
    <div class="bg-secondary lifted sticky-top">
      <b-container fluid="lg" class="align-items-center d-flex text-white px-0" :class="{ 'py-3': !showHeaderCartBtn }">
        <div class="d-flex align-items-center">
          <b-button :to="{ name: 'MyBundle' }" variant="link" data-qa="myBundle-processTemplate-backToBundleList-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">{{ getTitle }}</span>
        </div>
        <div class="my-bundle ml-auto">
          <div class="cart">
            <b-button
              v-if="showHeaderCartBtn"
              squared
              size="lg"
              variant="dark"
              class="py-3 btn-group"
              v-b-toggle="'my-bundle-cart'"
              data-qa="myBundle-generateBundle-bundleCart-btn"
            >
              <icon name="box-open" class="icon-size-4" />
              <b-badge v-if="getBundleCartDetails.bundleItems.length" pill variant="danger">
                <span>{{ getCartTotal }}</span>
              </b-badge>
            </b-button>
          </div>
        </div>
      </b-container>
    </div>

    <b-container fluid="lg" class="pt-3 px-0">
      <b-card class="border-0 border-lg">
        <router-view
          :next-route="nextRoute()"
          :current-route="currentRoute()"
          :previous-route="previousRoute()"
          :navigate-previous="previous"
          :navigate-next="validateAndContinue"
          ref="routeView"
        />
        <footer-navigator
          v-if="showFooter"
          :is-busy="isBusy"
          :is-update="isUpdate"
          :next-route="nextRoute()"
          :current-route="currentRoute()"
          :previous-route="previousRoute()"
          @navigate-previous="previous"
          @navigate-next="validateAndContinue"
        />
      </b-card>
    </b-container>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import myBundleRouteMixin from '@/app/my-bundle/mixins/myBundleRouteMixin'
import FooterNavigator from '@/app/my-bundle/wizard/components/block/FooterNavigator'
export default {
  name: 'MyBundleProcessTemplate',
  components: { FooterNavigator },
  mixins: [myBundleRouteMixin],
  data() {
    return {
      companyLogo: this.$const.constImage.COMPANY_LOGO,
    }
  },
  created() {
    this.clearLoadedData(['myBundle'])
  },
  async mounted() {
    await this.initRouting(true)
  },
  computed: {
    ...mapGetters(['getMemberDetails', 'isLoading']),
    ...mapGetters('myBundle', ['getBundleCartDetails']),
    isUpdate() {
      return Boolean(this.$route.query.id)
    },
    getTitle() {
      return (this.isUpdate && this.$t('MyBundle.UpdateBundle.Title')) || this.$t('MyBundle.CreateBundle.Title')
    },
    showFooter() {
      return this.$route.meta.showFooter
    },
    showHeaderCartBtn() {
      return this.$route.meta.showHeaderCart
    },
    getCartTotal() {
      let cart = this.getBundleCartDetails.bundleItems || []
      return cart.reduce((accum, current) => {
        return accum + Number(current.product_quantity)
      }, 0)
    },
    isBusy() {
      let loadingState = ['updatingBundleCart', 'creatingBundle', 'updatingBundle', 'loadingHierarchicalConfig']
      return this.isLoading(loadingState)
    },
  },
  methods: {
    ...mapActions(['clearLoadedData']),
    ...mapActions('myBundle', ['loadBundleDetails', 'setBundleCountry', 'setBundleCartDetails']),
    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>
