<template>
  <div>
    <div class="bg-dark px-4 pt-5 pb-3 px-md-5">
      <h1 class="text-white m-0">{{ getReceiptMeta.transactionTitle }}</h1>
    </div>
    <div class="px-4 py-3 px-md-5">
      <component
        :is="getReceiptMeta.component"
        class="mb-5"
        printing-mode
        :label-class="['col-4']"
        :receipt-details="transactionDetails"
        :data-qa-prefix="`${dataQaPrefix}-printViewReceipt`"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'EWalletPrintViewReceipt',
  props: {
    dataQaPrefix: { type: String, required: true },
    transactionDetails: { type: Object, required: true },
  },
  computed: {
    getReceiptMeta() {
      let meta = {}
      if (this.transactionDetails.transactionType === 'withdraw') {
        meta = {
          transactionTitle: this.$t('EWallet.FundWithdrawal.Status.RequestSubmitted'),
          component: () => import('@/app/ewallet/_global/components/template/EWalletFundWithdrawalReceiptTemplate'),
        }
      } else if (this.transactionDetails.transactionType === 'transfer') {
        meta = {
          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
    },
  },
}
</script>
