<template>
  <div>
    <b-row>
      <b-col cols="12" lg="8" xl="9">
        <i-token-selected-products-table
          :currency="currency"
          class="bg-white mb-3"
          :selected-items="getRedeemedProductList"
        />

        <shipping-method
          id="shippingMethod"
          enable-cross-country
          v-model="shippingModel"
          class="bg-white my-4 py-4"
          :shipping-info="shippingInfo"
          :allow-save-shipping-address="false"
          shipping-method-form-field-row-size-classes="col-lg-12"
          data-qa-prefix="enrolment-orderReviewPage"
          ref="shippingMethod"
        />
      </b-col>

      <b-col cols="12" lg="4" xl="3">
        <order-summary v-bind="orderSummaryProps" @continueAction="navigateNext()" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
import _ from 'lodash'
import { mapActions, mapGetters } from 'vuex'
import { mapMasterDataId } from '@/app/_global/mixins'
import OrderSummary from '@/app/_global/components/blocks/OrderSummary'
import ShippingMethod from '@/app/_global/components/blocks/ShippingMethod'
import ITokenOrderCommonMixins from '@/app/i-token/mixins/iTokenOrderCommonMixins'
import ITokenSelectedProductsTable from '@/app/i-token/_global/components/elements/ITokenSelectedProductsTable'

export default {
  name: 'ITokenRedemptionShippingInfoStep',
  components: { OrderSummary, ITokenSelectedProductsTable, ShippingMethod },
  mixins: [ITokenOrderCommonMixins],
  data() {
    return {
      shippingInfo: {},
      shippingModel: {},
    }
  },
  provide() {
    let self = this
    return {
      get _shipping_countries() {
        return self.getCountries
      },
      _self_pickup_load_stockist_address_list: self.generateStockistAddressLists,
    }
  },
  watch: {
    shippingModel(val) {
      this.getRedemptionDeliveryFees(val)
    },
  },
  computed: {
    ...mapMasterDataId({
      SALE_DELIVERY_METHOD: {
        shippingMethodDeliveryId: 'DELIVERY',
      },
      PREFERRED_CONTACT: {
        preferredEmailId: 'EMAIL',
      },
    }),
    ...mapGetters([
      'isLoading',
      'getShippingData',
      'getAppLocationCountry',
      'getMyAccountMemberDetails',
      'getMyAccountIsPreferredContactType',
    ]),
    isBusy() {
      return this.isLoading(['updatingITokenRedemptionForm', 'myAccountInfo', 'loadingITokenRedemptionCharges'])
    },
  },
  async mounted() {
    await this.resolveMasters
    await this.initMemberShippingInfo()
  },
  methods: {
    ...mapActions('itoken', ['updateRedemptionFormData']),
    ...mapActions(['loadMyAccountInfo', 'initializeShippingData', 'loadCountries', 'loadStockistLocationAddressList']),
    async initMemberShippingInfo() {
      await this.loadMyAccountInfo()
      await this.initializeShippingData({
        member: this.getMyAccountMemberDetails,
        countryId: this.getAppLocationCountry.countryId,
        isPreferredEmail: this.getMyAccountIsPreferredContactType(this.preferredEmailId),
      })
      await this.loadCountries()
      this.shippingInfo = {
        ...(_.cloneDeep(this.getShippingData) || {}),
        sale_delivery_method: this.shippingMethodDeliveryId,
      }
    },
    generateStockistAddressLists(payload) {
      return this.loadStockistLocationAddressList({
        country_id: this.getAppLocationCountry.countryId,
        location_id: payload.location_id,
      })
    },
    async validateAndSubmit() {
      let self = this
      return this.$refs.shippingMethod.validate().then(valid => {
        if (!valid) {
          self.$scrollTo('[name="' + self.$refs.shippingMethod.$validator.errors.items[0].field + '"]', { offset: -80 })
        }
        this.updateRedemptionFormData({ shippingInfo: { ...self.$refs.shippingMethod.getData(), validate: valid } })

        return valid
      })
    },
  },
}
</script>
