<template>
  <div>
    <b-card>
      <div>
        <order-complete
          v-if="isReady"
          class="animated fadeIn"
          show-i-token-voucher-no
          :wrapper-classes="['p-0']"
          :container-classes="['p-0']"
          :show-payment-mode-delivery-details="false"
          @payment-success="() => (paymentSuccess = true)"
        />

        <b-skeleton-table v-else :rows="1" />
      </div>

      <div v-if="isOrderFailed">
        <b-button
          class="px-3"
          @click="navigatePrevious"
          :variant="(getCurrentPaymentIsQr && 'outline-light') || 'outline-primary'"
          data-qa="iToken-iTokenRedemptionCompletionStep-back-btn"
        >
          {{ currentRoute.previous }}
        </b-button>
      </div>
    </b-card>
  </div>
</template>

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

export default {
  name: 'ITokenRedemptionCompletionStep',
  mixins: [ITokenCommonMixins],
  components: { OrderComplete },
  provide() {
    let self = this

    if (!self.getCurrentSaleId) {
      return {
        _order_complete_get_current_sales_details: function() {
          return self.getOrderDetails
        },
        _order_complete_get_sales_created_user: function() {
          return self.getOrderDetails.downline_member
        },
      }
    }
  },
  data() {
    return {
      transactionDetails: {},
      paymentSuccess: false,
      isReady: false,
    }
  },
  computed: {
    ...mapGetters(['isLoading', 'getSalesDetails', 'getCurrentSaleId', 'isOrderFailed', 'getCurrentPaymentIsQr']),
    getOrderDetails() {
      let {
        status,
        voucher,
        campaign,
        shipping,
        country_id,
        total_point,
        downline_member,
        transaction_date,
        self_pick_up_number,
        self_collection_point,
        delivery_method,
        translated_delivery_method,
      } = this.transactionDetails

      return {
        country_id,
        delivery_method,
        transaction_date,
        self_collection_point,
        selected: { shipping },
        translated_delivery_method,
        self_pick_up_number: self_pick_up_number,
        campaign: {
          ...campaign,
          calculation: { selected_point: total_point || 0 },
        },
        redemption: {
          voucher,
        },
        order_status: (status && status.key) || 'completed',
        downline_member: (downline_member && downline_member.name) || '-N/A-',
      }
    },
  },

  async mounted() {
    await this.loadRedemptionDetails()
  },
  methods: {
    ...mapActions(['clearLoadedData']),
    ...mapActions('itoken', ['loadITokenRedemptionDetails']),
    loadRedemptionDetails() {
      if (this.getITokenRedemptionFormDetails.transactionId) {
        this.loadITokenRedemptionDetails(this.getITokenRedemptionFormDetails.transactionId).then(result => {
          result = result || {}
          let addressData = this.$helpers.getValue(result, 'self_collection_point.address_data')

          if (addressData) {
            result.self_collection_point.address_data = JSON.parse(addressData || '') || []
          }

          this.transactionDetails = result
          this.isReady = true
        })
      }
    },
  },
  beforeDestroy() {
    if (this.paymentSuccess && !this.getCurrentPaymentIsQr) {
      this.clearLoadedData(['iToken', 'sales'])
    }
  },
}
</script>
