<template>
  <div>
    <div class="d-flex justify-content-center align-items-center vh-50" v-if="loadingData">
      <icon class="icon-size-4" name="spinner" pulse />
    </div>
    <order-steps-template
      v-else
      :steps="selectedOrder"
      :steps-callback="stepCallback"
      :content-wrapper-class="{ content: true }"
    >
      <order-page-template
        v-bind="orderProps()"
        @continueAction="validateAndContinue"
        :show-continue-button="false"
        :show-promo-code="false"
      >
        <order-payment-block
          :on-payment="onPayment"
          :create-sales="createSale"
          :check-epp-payments="false"
          :show-on-hold-payment-options="false"
          :exclude-payment-mode="excludePaymentMode"
          :on-hold-payment-options-key="['esac_voucher_on_hold_payment_options']"
          :balance="parseFloat($helpers.getValue(getEsacSaleCreationData, 'sales_data.order_fees.total_gmp'))"
          :allow-zero-balance="true"
        />
      </order-page-template>
    </order-steps-template>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import OrderPageTemplate from '@/app/_global/components/templates/OrderPageTemplate'
import OrderStepsTemplate from '@/app/_global/components/templates/OrderStepsTemplate'
import orderCommonsMixin from '../../mixins/orderCommonsMixin'
import OrderPaymentBlock from '@/app/_global/components/blocks/OrderPayment'

export default {
  name: 'EsacMakePayment',
  mixins: [orderCommonsMixin],
  components: {
    OrderPageTemplate,
    OrderStepsTemplate,
    OrderPaymentBlock,
  },
  data() {
    return {
      saleId: null,
      saleCreationData: null,
      loadingData: true,
      excludePaymentMode: ['AEON', 'House Cheque', 'Discount Voucher', 'E-Wallet'],
    }
  },
  mounted() {
    // this.saleId = this.getEsacPaymentSaleId
    // if (this.saleId === null) {
    //   this.saleCreationData = this.getEsacSaleCreationData
    // }
    this.sale_id = null
    this.loadingData = false
  },
  methods: {
    ...mapActions(['clickEsacMakePaymentBack', 'clickEsacMakePaymentComplete', 'doShopCreateSale']),
    createSale(paymentMode) {
      // TODO: use when sales can allow mutiple payment to single sales
      // if (!this.saleId) {
      return this.doShopCreateSale(this.getEsacSaleCreationData).then(saleId => {
        if (Number.isInteger(saleId)) {
          paymentMode.sale_id = saleId
          this.saleId = saleId
          return paymentMode
        } else {
          return false
        }
      })
      // } else {
      //   paymentMode.sale_id = this.saleId
      //   return Promise.resolve(paymentMode)
      // }
    },
    validateAndContinue() {
      //
    },
    onPayment() {
      this.clickEsacMakePaymentComplete()
    },
  },
  computed: {
    ...mapGetters(['getEsacCurrencyCode', 'getEsacPaymentSaleId', 'getEsacSaleCreationData']),
  },
}
</script>
