<template>
  <eshop-template>
    <div class="pre-checkout-header">
      <affix
        v-if="!isLoading('loadingCart') && !isLoading('loadingCartProductEligible')"
        class="w-100"
        relative-element-selector="#pre-checkout-content"
      >
        <b-container class="bg-white">
          <b-row class="py-4 px-0 px-md-4 border-bottom">
            <b-col cols="auto" class="text-left">
              <a @click="previous">
                <b-btn variant="outline-primary" class="rounded-4 px-4" data-qa="back-btn">
                  {{ previousRoute().previous }}
                </b-btn>
              </a>
            </b-col>
            <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-col cols="auto" class="text-right">
              <span class="d-inline-block mr-2 text-secondary font-weight-bold">
                {{ $t('Eshop.Checkout.Cart.TotalInCart', { quantity: getCartTotal }) }}
              </span>
              <b-btn variant="primary" class="rounded-4 px-4" @click="preCheckout" data-qa="next-btn">
                {{ nextRoute().next }}
              </b-btn>
            </b-col>
          </b-row>
        </b-container>
      </affix>
    </div>
    <b-container class="bg-white mb-2" id="pre-checkout-content">
      <b-row>
        <b-col cols="12" class="py-4 px-3 px-md-5">
          <div
            v-if="isLoading('loadingCart') || isLoading('loadingCartProductEligible')"
            class="d-flex justify-content-center align-middle flex-column text-center p-5 vh-75"
          >
            <div class="d-inline-block">
              <icon class="icon-size-4" name="spinner" pulse />
            </div>
          </div>
          <div v-else>
            <h4>
              {{ componentTitle() || title }}
            </h4>
            <router-view ref="routeComponent" class="route-view content" />
          </div>
        </b-col>
      </b-row>
    </b-container>
  </eshop-template>
</template>
<script>
import EshopTemplate from './EshopTemplate'
import { mapGetters, mapActions } from 'vuex'
import pageTitleMixin from '@/app/_global/mixins/pageTitleMixin'
import checkoutRoutingMixin from '../../mixins/checkoutRoutingMixin'

export default {
  name: 'PreCheckoutTemplate',
  components: {
    EshopTemplate,
  },
  mixins: [pageTitleMixin, checkoutRoutingMixin],
  async mounted() {
    await this.initPreCheckoutRoute()
  },
  methods: {
    ...mapActions('eshop', ['productChangeCurrentCategory', 'cartNeedSizeSelection']),
    ...mapActions('enrolment', ['updateEmploymentFormStatus']),
    preCheckout() {
      if (typeof this.$refs.routeComponent.preCheckout === 'function') {
        this.$refs.routeComponent.preCheckout(this.next)
      }
    },
    componentTitle() {
      if (typeof this.$refs.routeComponent !== 'undefined' && typeof this.$refs.routeComponent === 'function') {
        return this.$refs.routeComponent.title()
      }
      return null
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getErrors']),
    ...mapGetters('eshop', ['getCartTotal', 'getCartHasRental']),
  },
  watch: {
    getCartHasRental: {
      handler(value) {
        this.updateEmploymentFormStatus(!value)
      },
      immediate: true,
    },
  },
}
</script>
