<template>
  <div class="content">
    <div class="enrol-payment-wrapper">
      <OrderPageTemplate
        v-bind="orderProps()"
        :continue-action="validateAndContinue"
        :show-continue-button="false"
        :show-promo-code="false"
        class="ml-0 w-100"
      >
        <order-payment-block
          :show-amp-preference="true"
          :on-payment="onPayment"
          :create-sales="createSale"
          :balance="getCartTotalPrice"
          :exclude-payment-mode="excludePaymentTypes"
          :on-hold-payment-options-key="getOnHoldPaymentKey()"
          @ampPreference="updateAmpPreference"
        >
        </order-payment-block>
      </OrderPageTemplate>
    </div>
  </div>
</template>
<script>
import OrderPageTemplate from '@/app/_global/components/templates/OrderPageTemplate'
import OrderPaymentBlock from '@/app/_global/components/blocks/OrderPayment'
import currencyMixin from '@/app/_global/mixins/currencyMixin'
import orderCommonsMixin from '@/app/_global/mixins/orderCommonsMixin'
import { mapActions, mapGetters } from 'vuex'
import _ from 'lodash'

export default {
  name: 'EnrolmentPaymentPage',
  mixins: [currencyMixin, orderCommonsMixin],
  components: {
    OrderPageTemplate,
    OrderPaymentBlock,
  },
  props: {
    enrolmentData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      shippingInfo: {},
      sale_id: null,
    }
  },
  async mounted() {
    this.sale_id = null
    this.enrolmentData.step_states['checkout'] = await true
    this.clearLoadedData('sales')
  },
  methods: {
    ...mapActions(['clearLoadedData', 'doSalesCartCreateSale']),
    ...mapActions('enrolment', ['postTempEnrolment']),
    updateAmpPreference(value) {
      this.enrolmentData.amp_preference = value

      let payload = _.cloneDeep(this.enrolmentData)
      this.postTempEnrolment(payload)
    },
    createSale(paymentMode) {
      // TODO: use when sales can allow mutiple payment to single sales
      // if (!this.sale_id) {
      let self = this
      return this.doSalesCartCreateSale({
        country_id: this.getAppLocationCountry.countryId,
        location_id: this.getAppLocationCountry.locationId,
        selected: {
          shipping: this.getOrderShipping,
          promotions: this.getSelectedFocPwpItems,
        },
        promotion: this.getEligiblePromotion,
      }).then(saleId => {
        if (Number.isInteger(saleId)) {
          self.sale_id = saleId
          paymentMode.sale_id = saleId
          return paymentMode
        } else {
          return false
        }
      })
    },
    onPayment() {
      this.next()
    },
    validateAndContinue() {
      // TODO: Validate
    },
  },
  computed: {
    ...mapGetters(['getEnrolmentLocation', 'getAppLocationCountry', 'getCountryNameById']),
    ...mapGetters('eshop', [
      'getOrderShipping',
      'getCartTotalPrice',
      'getSelectedFocPwpItems',
      'getEligiblePromotion',
      'getCartHasRental',
      'getCartDisplayItems',
    ]),
    ...mapGetters('enrolment', ['getEnrolCountryId', 'getSponsorDetails']),
    excludePaymentTypes: function(vue) {
      if (!vue.$helpers.getValue(vue.getSponsorDetails, 'user_id')) {
        return ['E-Wallet']
      } else {
        return []
      }
    },
    countryName() {
      let countryName = this.getCountryNameById(this.getAppLocationCountry.countryId)

      if (countryName !== undefined && countryName !== null) {
        countryName = countryName.toLowerCase()
      } else {
        countryName = ''
      }

      return countryName
    },
  },
  async beforeDestroy() {
    this.enrolmentData.step_states['checkout'] = await false
  },
}
</script>
