<template>
  <b-row>
    <b-col>
      <e-wallet-fund-transfer-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}-fundTransferReceipt`"
      />

      <b-row class="d-print-none">
        <b-col cols="auto" class="mb-2">
          <b-button
            size="lg"
            variant="outline-primary"
            @click="makeAnotherPayment"
            :data-qa-prefix="`${dataQaPrefix}-fundTransferReceipt-makeAnotherTransfer-btn`"
          >
            {{ $t('EWallet.FundTransfer.MakeAnotherTransfer') }}
          </b-button>
        </b-col>
        <b-col>
          <b-button
            variant="primary"
            size="lg"
            class="px-5"
            :to="{ name: 'EWalletHome' }"
            :data-qa-prefix="`${dataQaPrefix}-fundTransferReceipt-done-btn`"
          >
            {{ $t('Common.Done') }}
          </b-button>
        </b-col>
      </b-row>
    </b-col>
  </b-row>
</template>

<script>
import moment from 'moment'
import EWalletFundTransferReceiptTemplate from '@/app/ewallet/_global/components/template/EWalletFundTransferReceiptTemplate'

export default {
  name: 'FundTransferReceiptForm',
  components: { EWalletFundTransferReceiptTemplate },
  props: {
    dataQaPrefix: { type: String, required: true },
    receiptDetails: { type: Object, required: true },
  },
  data() {
    return {
      transactionStatus: new Map([
        ['rejected', { label: this.$t('EWallet.TransactionStatus.Failed'), class: 'text-danger' }],
        ['successful', { label: this.$t('EWallet.TransactionStatus.Completed'), class: 'text-info-green' }],
      ]),
    }
  },
  computed: {
    getReceiptData() {
      let {
        fromIbo,
        fromName,
        targetIbo,
        targetName,
        recipientReference,
        transactionNumber,
        transactionStatus,
      } = this.receiptDetails

      return {
        transactionNumber,
        recipientReference,
        from: `${fromIbo} ${fromName}`,
        to: `${targetIbo} ${targetName}`,
        status: this.transactionStatus.get(transactionStatus) || {},
        transactionTime: moment(this.receiptDetails.transactionDate).format('h:mm A'),
        transactionDate: moment(this.receiptDetails.transactionDate).format('D MMMM yyyy'),
      }
    },
  },
  methods: {
    makeAnotherPayment() {
      this.$router.go(0)
    },
  },
}
</script>
