<template>
  <div class="dashboard-panel-element rounded-0 p-0" v-can:view="'e-wallet'">
    <b-overlay :show="isBusy" variant="white" :class="[{ 'vh-50': isBusy }]" opacity="0.96">
      <template v-slot:overlay>
        <b-spinner class="mx-2 text-primary" />
        <strong class="h4 text-primary">{{ $t('Common.Loading') }}</strong>
      </template>

      <div class="p-2 border-bottom d-print-none">
        <b-button
          variant="link"
          :to="{ name: 'EWalletTransferRecordPaginated' }"
          class="text-decoration-none d-flex align-items-center"
          data-qa="eWallet-transactionDetails-back-btn"
        >
          <icon name="back-arrow" class="mr-2" />
          <span class="font-size-5">{{ $t('Common.Back') }}</span>
        </b-button>
      </div>

      <div v-if="getErrors('loadTransactionDetails')" class="vh-50 d-flex align-items-center justify-content-center">
        <h3>{{ $t('Common.RecordNotFound') }}</h3>
      </div>

      <template v-else>
        <e-wallet-web-view-receipt
          :transaction-details="getTransactionDetails"
          class="d-print-none"
          data-qa-prefix="eWallet-transactionDetails"
        />

        <e-wallet-print-view-receipt
          :transaction-details="getTransactionDetails"
          class="d-print-block d-none"
          data-qa-prefix="eWallet-transactionDetails"
        />
      </template>
    </b-overlay>
  </div>
</template>

<script>
import moment from 'moment'
import { mapGetters, mapActions } from 'vuex'
import eWalletCommonMixin from '@/app/ewallet/_global/components/Mixins/eWalletCommonMixin'
import EWalletWebViewReceipt from '@/app/ewallet/transaction-details/blocks/EWalletWebViewReceipt'
import eWalletBankDetailsMixin from '@/app/ewallet/_global/components/Mixins/eWalletBankDetailsMixin'
import EWalletPrintViewReceipt from '@/app/ewallet/transaction-details/blocks/EWalletPrintViewReceipt'

export default {
  name: 'EWalletTransactionDetails',
  mixins: [eWalletCommonMixin, eWalletBankDetailsMixin],
  components: { EWalletPrintViewReceipt, EWalletWebViewReceipt },
  props: {
    transactionId: { type: String, required: true },
  },
  data() {
    return {
      transactionDetails: {},
      transactionStatus: new Map([
        ['pending', { label: this.$t('EWallet.TransactionStatus.Pending') }],
        ['rejected', { label: this.$t('EWallet.TransactionStatus.Failed'), class: 'text-danger' }],
        ['cancelled', { label: this.$t('EWallet.TransactionStatus.Cancelled'), class: 'text-black-50' }],
        ['in_process', { label: this.$t('EWallet.TransactionStatus.Processing'), class: 'text-primary' }],
        ['successful', { label: this.$t('EWallet.TransactionStatus.Completed'), class: 'text-info-green' }],
      ]),
    }
  },
  mounted() {
    this.initMixin()
    this.loadEWalletTransactionDetails(this.transactionId).then(res => {
      this.transactionDetails = res || {}
    })
  },
  computed: {
    ...mapGetters(['isLoading', 'getMyAccountMemberDetails', 'getErrors']),
    isBusy() {
      return this.isLoading('loadingTransactionDetails')
    },
    getTransactionDetails() {
      let { member_id, name } = this.getMyAccountMemberDetails.details
      let {
        id,
        amount,
        after_balance,
        recipient_email,
        transaction_date,
        transaction_type,
        transfer_to_user,
        transaction_number,
        transaction_status,
        recipient_reference,
        member_payment_info,
      } = this.transactionDetails
      let transactionStatus = { ...(transaction_status || {}) }

      let details = {
        amount,
        recipientEmail: recipient_email,
        transactionNumber: transaction_number,
        recipientReference: recipient_reference,
        from: `${member_id || ''} ${name || ''}`,
        transactionType: transaction_type && transaction_type.key,
        transactionTime: moment(transaction_date).format('h:mm A'),
        transactionDate: moment(transaction_date).format('D MMMM yyyy'),
        status: {
          key: transactionStatus.key,
          ...(this.transactionStatus.get(transactionStatus.key) || {}),
        },
      }

      if (details.transactionType === 'withdraw') {
        details['id'] = id
        details['eWalletBalance'] = after_balance
        details['bankMeta'] = this.getBankDetails(this.fetchBankDetails(member_payment_info))
      } else if (details.transactionType === 'transfer') {
        let targetIbo = { ...(transfer_to_user || {}) }
        details['to'] = `${targetIbo.old_member_id || ''} ${targetIbo.name || ''}`
      }
      return details
    },
  },
  methods: {
    ...mapActions(['loadEWalletTransactionDetails']),
    fetchBankDetails(source) {
      try {
        return JSON.parse(source)
      } catch {
        return {}
      }
    },
  },
}
</script>
