<template>
  <div class="content">
    <div class="enrol-review-order-wrapper">
      <order-complete
        class="w-100 mt-3 bg-white"
        ref="order-complete"
        @payment-success="paymentSuccess"
        :show-payment-mode-delivery-details="true"
      />
    </div>
  </div>
</template>
<script>
import orderCommonsMixin from '@/app/_global/mixins/orderCommonsMixin'
import OrderComplete from '@/app/_global/components/blocks/OrderComplete'
import { mapActions, mapGetters } from 'vuex'

import _ from 'lodash'

export default {
  name: 'EnrolmentOrderReviewPage',
  mixins: [orderCommonsMixin],
  props: {
    enrolmentData: {
      type: Object,
      required: true,
    },
  },
  components: {
    OrderComplete,
  },
  data() {
    return {
      shippingInfo: {},
      localShippingInfo: {
        continueDisabled: true,
      },
      loadingData: true,
      userName: null,
    }
  },
  provide() {
    let self = this
    return {
      _order_complete_get_sales_created_user: function() {
        if (self.userName == null && self.getUserName) {
          self.userName = self.getUserName
        }
        return self.userName
      },
      _order_complete_message_map: function() {
        return new Map([
          [false, this.$t('Eshop.Order.GlobalWords.ThankYouLoading')],
          [0, this.$t('Eshop.Order.GlobalWords.SorryYourPaymentWasNotProcessed')],
          [1, this.$t('Eshop.Order.GlobalWords.EnrollmentApplicationSubmitted')],
          [2, this.$t('Eshop.Order.GlobalWords.ThankYouLoading')],
          [3, this.$t('Eshop.Order.GlobalWords.EnrollmentApplicationSubmitted')],
        ])
      },
      _general_selected_country_id: function() {
        return self.getEnrolmentRegion.id
      },
    }
  },
  mounted() {
    let self = this
    self.loadStockistStateAndCities(self.getEnrolmentRegion.id)
    self.initializeShippingData({
      member: self.getEnrolForm.member_data,
      countryId: self.getEnrolmentRegion.id,
    })
    self.shippingInfo = _.cloneDeep(self.getShippingData)
    this.loadCountries()
  },
  methods: {
    ...mapActions('eshop', ['loadCart', 'saveOrderShipping']),
    ...mapActions([
      'loadCountries',
      'loadStockistStateAndCities',
      'loadMyAccountInfo',
      'initializeShippingData',
      'loadStockistLocationAddressList',
    ]),
    generateStockistAddressLists(payload) {
      return this.loadStockistLocationAddressList({
        country_id: this.getEnrolmentRegion.id,
        state_id: payload.state_id,
        location_id: payload.location_id,
      })
    },
    validateAndContinue: function() {
      let shippingMethodValidation = this.$refs.shippingMethod.validate()
      if (shippingMethodValidation.items.length === 0) {
        this.continueToNextStep()
        this.enrolmentData.step_states['review-order'] = true
      } else {
        this.errors.items = shippingMethodValidation.items
        this.enrolmentData.step_states['review-order'] = false
      }
    },
    continueToNextStep() {
      let data = this.$refs.shippingMethod.getData()
      this.saveOrderShipping(data)
      this.next()
    },
    paymentSuccess() {
      this.$emit('payment-complete', true)
    },
  },
  computed: {
    ...mapGetters([
      'getMyAccountMemberDetails',
      'getShippingData',
      'getCountries',
      'getSelectedCountry',
      'getStockistStatesByCountry',
      'getEnrolmentRegion',
    ]),
    ...mapGetters('enrolment', ['getEnrolForm', 'getUserName']),
  },
}
</script>
