<template>
  <b-row>
    <b-col cols="12" class="mb-4">
      <b-row v-if="showAmount" :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('EWallet.Amount') }}:</b-col>
        <b-col class="text-uppercase text-green">{{ receiptDetails.amount || '-' }}</b-col>
      </b-row>

      <b-row :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('EWallet.TransactionForm.FromIboId') }}:</b-col>
        <b-col class="text-uppercase">{{ receiptDetails.from || '-' }}</b-col>
      </b-row>

      <b-row :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('EWallet.FundTransfer.ToIboId') }}:</b-col>
        <b-col>{{ receiptDetails.to || '-' }}</b-col>
      </b-row>

      <b-row :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('EWallet.TransactionForm.RecipientReference') }}:</b-col>
        <b-col class="pre-wrap">{{ receiptDetails.recipientReference || '-' }}</b-col>
      </b-row>

      <b-row :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('Common.Status') }}:</b-col>
        <b-col :class="$helpers.getValue(receiptDetails, 'status.class', '')">
          {{ $helpers.getValue(receiptDetails, 'status.label', '-') }}
        </b-col>
      </b-row>

      <b-row :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('EWallet.TransactionForm.TransactionNumber') }}:</b-col>
        <b-col>{{ receiptDetails.transactionNumber || '-' }}</b-col>
      </b-row>

      <b-row :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('Common.Sales.TransactionDate') }}:</b-col>
        <b-col>{{ receiptDetails.transactionDate || '-' }}</b-col>
      </b-row>

      <b-row :class="[printingMode ? 'py-2' : 'py-3']" class="font-weight-bolder">
        <b-col class="text-black-50" :class="labelClass">{{ $t('EWallet.TransactionForm.TransactionTime') }}:</b-col>
        <b-col>{{ receiptDetails.transactionTime || '-' }}</b-col>
      </b-row>
    </b-col>

    <b-col>
      <b-button
        variant="link"
        @click="printReceipt"
        class="border-0 px-0 d-print-none"
        :data-qa="`${dataQaPrefix}-fundTransferReceiptLayout-print-btn`"
      >
        <icon name="printer-icon" class="pr-2 icon-size-2" />
        <span>{{ $t('EWallet.PrintReceipt') }}</span>
      </b-button>
    </b-col>
  </b-row>
</template>

<script>
export default {
  name: 'EWalletFundTransferReceiptTemplate',
  props: {
    showAmount: { type: Boolean, default: true },
    dataQaPrefix: { type: String, required: true },
    printingMode: { type: Boolean, default: false },
    receiptDetails: { type: Object, required: true },
    labelClass: { type: [String, Array], default: () => [] },
  },
  methods: {
    printReceipt() {
      window.print()
    },
  },
}
</script>
