<template>
  <div>
    <b-card>
      <i-token-voucher-details
        :voucher-details="voucherDetails"
        :total-redeemed-points="getTotalPointsRedeemed"
        :is-busy="isLoading(['loadingITokenVoucherDetails'])"
        :add-to-cart-call-back="addProductToRedemptionCart"
        :product-quantity-getter="getCartProductUnitQuantity"
        data-qa-prefix="iToken-iTokenRedemptionSelectProductStep"
      />

      <div class="border-top pt-3">
        <b-button
          size="lg"
          variant="primary"
          :disabled="isBusy"
          @click="navigateNext()"
          class="float-right d-flex align-items-center"
          data-qa="iToken-iTokenRedemptionSelectProductStep-continue-btn"
        >
          <span>{{ currentRoute.next }}</span>
          <b-spinner v-show="isBusy" small class="ml-2" />
        </b-button>
      </div>
    </b-card>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import iTokenCommonMixins from '@/app/i-token/mixins/iTokenCommonMixins'
import ITokenVoucherDetails from '@/app/i-token/_global/components/blocks/ITokenVoucherDetails'

export default {
  name: 'ITokenRedemptionSelectProductStep',
  components: { ITokenVoucherDetails },
  mixins: [iTokenCommonMixins],
  computed: {
    ...mapGetters(['isLoading']),
    ...mapGetters('itoken', ['getCartProductUnitQuantity']),
    isBusy() {
      return this.isLoading(['updateRedemptionFormData', 'redeemProductsAddingToCart', 'loadingITokenVoucherDetails'])
    },
  },
  methods: {
    ...mapActions('itoken', ['addProductToRedemptionCart']),
    validateAndSubmit() {
      let error = {}

      if ((this.voucherDetails.voucher_points || 0) < this.getTotalPointsRedeemed) {
        error = {
          title: this.$t('Itoken.Redemption.Error.InSufficientPoints'),
          text: this.$t('Itoken.Redemption.Error.InSufficientPoints.HelpText'),
        }
      } else if (this.getITokenRedemptionFormDetails.cart.length < 1) {
        error = {
          title: this.$t('Common.Checkout.SelectProducts.HelpText'),
        }
      }

      if (error.title) {
        this.$swal({
          type: 'error',
          title: error.title,
          text: error.text,
        })
      }

      return Object.keys(error).length === 0
    },
  },
}
</script>
