<template>
  <div>
    <e-wallet-transaction-template
      class="pb-4"
      show-transaction-banner
      :show-e-wallet-balance="false"
      :transaction-amount="transactionDetails.amount"
      :transaction-title="getReceiptMeta.transactionTitle"
      :transaction-description="getReceiptMeta.transactionDescription"
    >
      <component
        :is="getReceiptMeta.component"
        class="mb-5"
        :show-amount="false"
        :receipt-details="transactionDetails"
        :label-class="['col-12', 'text-md-right', 'col-md-4', 'col-lg-3', 'col-xl-2']"
        :data-qa-prefix="`${dataQaPrefix}-webViewReceipt`"
      />

      <b-row v-if="transactionDetails.transactionType === 'withdraw' && transactionDetails.status" class="d-print-none">
        <b-col v-if="transactionDetails.status.key === 'pending'" cols="auto" class="mb-2">
          <b-button
            size="lg"
            variant="outline-danger"
            @click="cancelWithdrawal"
            :data-qa-prefix="`${dataQaPrefix}-webViewReceipt-cancelWithdrawal-btn`"
          >
            {{ $t('EWallet.FundWithdrawal.CancelWithdrawalRequest') }}
          </b-button>
        </b-col>
      </b-row>
    </e-wallet-transaction-template>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import EWalletTransactionTemplate from '@/app/ewallet/_global/components/template/EWalletTransactionTemplate'

export default {
  name: 'EWalletWebViewReceipt',
  components: { EWalletTransactionTemplate },
  props: {
    dataQaPrefix: { type: String, required: true },
    transactionDetails: { type: Object, required: true },
  },
  computed: {
    ...mapGetters(['getErrors']),
    getReceiptMeta() {
      let meta = {}
      if (this.transactionDetails.transactionType === 'withdraw') {
        meta = {
          transactionDescription: this.$t('EWallet.FundWithdrawal.AmountWithdrew'),
          transactionTitle: this.$t('EWallet.FundWithdrawal.Status.RequestSubmitted'),
          component: () => import('@/app/ewallet/_global/components/template/EWalletFundWithdrawalReceiptTemplate'),
        }
      } else if (this.transactionDetails.transactionType === 'transfer') {
        meta = {
          transactionDescription: this.$t('EWallet.FundTransfer.AmountTransferred'),
          transactionTitle:
            (this.transactionDetails.status.key === 'successful' && this.$t('EWallet.FundTransfer.Status.Success')) ||
            (this.transactionDetails.status.key === 'rejected' && this.$t('EWallet.FundTransfer.Status.Fail')) ||
            '',
          component: () => import('@/app/ewallet/_global/components/template/EWalletFundTransferReceiptTemplate'),
        }
      }
      return meta
    },
  },
  methods: {
    ...mapActions(['cancelFundWithdrawalRequest']),
    async cancelWithdrawal() {
      let self = this
      let payload = {
        transactionId: this.transactionDetails.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.go(0)
        }
      })
    },
  },
}
</script>
