<template>
  <b-row>
    <b-col>
      <e-wallet-fund-withdrawal-receipt-template
        class="mb-5"
        :show-amount="false"
        :receipt-details="getReceiptData"
        :label-class="['col-12', 'text-md-right', 'col-md-4', 'col-lg-3', 'col-xl-2']"
        :data-qa-prefix="`${dataQaPrefix}-fundWithdrawalReceipt`"
      />

      <b-row class="d-print-none">
        <b-col v-if="getReceiptData.status.key === 'pending'" cols="auto" class="mb-2">
          <b-button
            size="lg"
            variant="outline-danger"
            @click="cancelWithdrawal"
            :data-qa-prefix="`${dataQaPrefix}-fundWithdrawalReceipt-cancelWithdrawal-btn`"
          >
            {{ $t('EWallet.FundWithdrawal.CancelWithdrawalRequest') }}
          </b-button>
        </b-col>
        <b-col>
          <b-button
            variant="primary"
            size="lg"
            class="px-5"
            :to="{ name: 'EWalletHome' }"
            :data-qa-prefix="`${dataQaPrefix}-fundWithdrawalReceipt-done-btn`"
          >
            {{ $t('Common.Done') }}
          </b-button>
        </b-col>
      </b-row>
    </b-col>
  </b-row>
</template>

<script>
import moment from 'moment'
import EWalletFundWithdrawalReceiptTemplate from '@/app/ewallet/_global/components/template/EWalletFundWithdrawalReceiptTemplate'
import { mapActions } from 'vuex'

export default {
  name: 'FundWithdrawalReceiptForm',
  components: { EWalletFundWithdrawalReceiptTemplate },
  props: {
    dataQaPrefix: { type: String, required: true },
    receiptDetails: { type: Object, required: true },
  },
  data() {
    return {
      transactionStatus: new Map([
        ['pending', { label: this.$t('EWallet.TransactionStatus.Pending') }],
        ['rejected', { label: this.$t('EWallet.TransactionStatus.Failed'), class: 'text-danger' }],
        ['in_process', { label: this.$t('EWallet.TransactionStatus.Processing'), class: 'text-primary' }],
        ['successful', { label: this.$t('EWallet.TransactionStatus.Completed'), class: 'text-info-green' }],
      ]),
    }
  },
  computed: {
    getReceiptData() {
      let {
        id,
        amount,
        fromIbo,
        fromName,
        bankMeta,
        eWalletBalance,
        recipientEmail,
        recipientReference,
        transactionNumber,
        transactionStatus,
      } = this.receiptDetails

      return {
        id,
        amount,
        eWalletBalance,
        recipientEmail,
        transactionNumber,
        recipientReference,
        bankMeta: { ...bankMeta },
        from: `${fromIbo} ${fromName}`,
        transactionTime: moment(this.receiptDetails.transactionDate).format('h:mm A'),
        transactionDate: moment(this.receiptDetails.transactionDate).format('D MMMM yyyy'),
        status: { key: transactionStatus, ...(this.transactionStatus.get(transactionStatus) || {}) },
      }
    },
  },
  methods: {
    ...mapActions(['cancelFundWithdrawalRequest']),
    async cancelWithdrawal() {
      let self = this
      let payload = {
        transactionId: this.getReceiptData.id,
      }

      await this.$swal({
        type: 'warning',
        title: self.$t('EWallet.FundWithdrawal.CancelWithdrawalRequest'),
        text: self.$t('EWallet.FundWithdrawal.CancelWithdrawalRequest.HelpText'),
        allowOutsideClick: false,
        showLoaderOnConfirm: true,
        showConfirmButton: true,
        showCancelButton: true,
        reverseButtons: true,
        confirmButtonText: self.$t('Common.Continue'),
        cancelButtonText: self.$t('Common.Cancel'),
        preConfirm: async () => {
          let result = await self.cancelFundWithdrawalRequest(payload)
          return { response: result }
        },
      }).then(async result => {
        let title = self.$t(
          result.value && result.value.response
            ? 'EWallet.FundWithdrawal.CancelWithdrawalRequest.Success'
            : 'EWallet.FundWithdrawal.CancelWithdrawalRequest.Fail'
        )

        let text =
          result.value && result.value.response
            ? ''
            : self.getErrors('cancelFundWithdrawal') || self.$t('Common.Error.ActionFailure.HelpText')

        await self.$swal({
          title,
          text,
          type: (result.value.response && 'success') || 'error',
          timer: result.value.response && '5000',
        })

        if (result.value.response) {
          self.$router.push({ name: 'EWalletHome' })
        }
      })
    },
  },
}
</script>
