<template>
  <div>
    <b-row v-if="getEWalletBalanceMeta.show" class="py-4 px-2 px-xl-4 bg-gray-100 m-0 mb-2">
      <b-col cols="auto">
        <e-wallet-balance-indicator
          :figure-class="['text-green']"
          :is-busy="getEWalletBalanceMeta.busy"
          :balance="getEWalletBalanceMeta.balance"
        />
      </b-col>
    </b-row>

    <b-row class="px-2 px-xl-4 m-0">
      <b-col>
        <div class="mt-4 mb-2">
          <h2 class="m-0 text-capitalize">{{ transactionTitle }}</h2>
          <p>
            <span v-if="getStepsMeta.current && getStepsMeta.total" class="pr-1 text-green">
              {{
                $t('EWallet.Transaction.StepsIndicator.Text', {
                  current: getStepsMeta.current,
                  total: getStepsMeta.total,
                })
              }}
            </span>
            <template v-if="getStepsMeta.description">
              <span> : {{ getStepsMeta.description }}</span>
            </template>
          </p>
          <div
            v-if="getTransactionBannerMeta.show && getTransactionBannerMeta.transactionAmount"
            class="bg-green text-white py-2 px-3 rounded-2 mb-3"
          >
            <span>{{ getTransactionBannerMeta.description }}</span>
            <h1 class="m-0 mt-1 text-white font-weight-bolder">{{ getTransactionBannerMeta.transactionAmount }}</h1>
          </div>
        </div>

        <div>
          <slot />
        </div>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { getCurrencyValue } from '@/helpers/currency-formatter'
import EWalletBalanceIndicator from '@/app/ewallet/_global/components/elements/EWalletBalanceIndicator'

export default {
  name: 'EWalletTransactionTemplate',
  components: { EWalletBalanceIndicator },
  props: {
    totalSteps: { type: Number, default: 0 },
    currentStep: { type: Number, default: 0 },
    isBusy: { type: Boolean, default: false },
    eWalletBalance: { type: String, default: '0' },
    transactionTitle: { type: String, default: '' },
    stepsDescription: { type: String, default: '' },
    transactionAmount: { type: String, default: '' },
    showEWalletBalance: { type: Boolean, default: true },
    transactionDescription: { type: String, default: '' },
    showTransactionBanner: { type: Boolean, default: false },
  },
  computed: {
    getTransactionBannerMeta() {
      return {
        show: this.showTransactionBanner,
        description: this.transactionDescription || '',
        transactionAmount: getCurrencyValue(this.transactionAmount),
      }
    },
    getEWalletBalanceMeta() {
      return {
        show: this.showEWalletBalance,
        balance: this.eWalletBalance,
        busy: this.isBusy,
      }
    },
    getStepsMeta() {
      return {
        current: this.currentStep,
        total: this.totalSteps,
        description: this.stepsDescription,
      }
    },
  },
}
</script>
