<template>
  <div class="dashboard-panel-element rounded-0 p-0" v-can:view="'e-wallet'">
    <e-wallet-transaction-template
      class="pb-4"
      :e-wallet-balance="getEWalletBalance"
      :current-step="getCurrentStepMeta.step"
      :total-steps="fundTransferSteps.length"
      :is-busy="isLoading('loadingEWalletDetails')"
      :transaction-amount="fundTransferFormData.amount"
      :steps-description="getCurrentStepMeta.stepDescription"
      :transaction-title="getCurrentStepMeta.transactionTitle"
      :show-e-wallet-balance="getCurrentStepMeta.showEWalletBalance"
      :show-transaction-banner="getCurrentStepMeta.showTransactionBanner"
      :transaction-description="getCurrentStepMeta.transactionDescription"
    >
      <keep-alive :max="2">
        <component :is="getCurrentStepMeta.component" v-bind="getCurrentStepMeta.bind" :ref="getCurrentStepMeta.ref">
          <div class="d-flex">
            <b-button
              v-if="getCurrentStepMeta.showBackBtn"
              size="lg"
              @click="backAction"
              variant="outline-primary"
              class="mr-3 px-4 px-md-5"
              :data-qa="`${dataQaPrefix}-${(currentStep === 1 && 'cancel') || 'back'}-btn`"
            >
              <span>{{ $t((currentStep === 1 && 'Common.Cancel') || 'Common.Back') }}</span>
            </b-button>
            <b-button
              v-if="getCurrentStepMeta.showNextBtn"
              size="lg"
              variant="primary"
              @click="nextAction"
              :disabled="getLoadingStatus"
              class="d-flex align-items-center px-4 px-md-5"
              :data-qa="`${dataQaPrefix}-${(getCurrentStepMeta.isSubmit && 'confirm') || 'continue'}-btn`"
            >
              <span>{{ $t((getCurrentStepMeta.isSubmit && 'Common.Confirm') || 'Common.Continue') }}</span>
              <b-spinner v-show="getLoadingStatus" small class="ml-2" />
            </b-button>
          </div>
        </component>
      </keep-alive>
    </e-wallet-transaction-template>
  </div>
</template>

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

export default {
  name: 'EWalletFundTransferWrapper',
  mixins: [eWalletCommonMixin],
  components: { EWalletTransactionTemplate },
  data() {
    return {
      fundTransferFormData: {},
      currentStep: 1,
      fundTransferSteps: [
        {
          step: 1,
          showBackBtn: true,
          showNextBtn: true,
          showEWalletBalance: true,
          showTransactionBanner: false,
          transactionTitle: this.$t('EWallet.FundTransfer'),
          component: () => import('@/app/ewallet/fund-transfer/blocks/FundTransferForm'),
          stepDescription: this.$t('EWallet.FundTransfer.ApplicationFormStepDescription'),
          ref: 'fundTransferForm',
        },
        {
          step: 2,
          isSubmit: true,
          showBackBtn: true,
          showNextBtn: true,
          showEWalletBalance: true,
          showTransactionBanner: true,
          transactionTitle: this.$t('EWallet.FundTransfer'),
          transactionDescription: this.$t('EWallet.FundTransfer.AmountToTransfer'),
          stepDescription: this.$t('EWallet.FundTransfer.ConfirmationFormStepDescription'),
          component: () => import('@/app/ewallet/fund-transfer/blocks/FundTransferConfirmationForm'),
          ref: 'confirmationForm',
        },
        {
          step: 3,
          showEWalletBalance: false,
          showTransactionBanner: true,
          transactionTitle: this.$t('EWallet.FundTransfer.Status.Success'),
          transactionDescription: this.$t('EWallet.FundTransfer.AmountTransferred'),
          stepDescription: this.$t('EWallet.FundTransfer.ReceiptFormStepDescription'),
          component: () => import('@/app/ewallet/fund-transfer/blocks/FundTransferReceiptForm'),
          ref: 'receiptForm',
        },
      ],
      dataQaPrefix: 'eWallet-eWalletFundTransfer',
    }
  },
  watch: {
    currentStep() {
      this.$scrollTo('body')
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getMyAccountMemberDetails']),
    getCurrentStepMeta() {
      let component = this.fundTransferSteps.find(el => el.step === this.currentStep) || {}
      component = this.propsBindingFactory(component)
      return component
    },
    getLoadingStatus() {
      let loaders = ['memberListLoading', 'creatingEWalletTransaction']
      return this.isLoading(loaders)
    },
  },
  async mounted() {
    await this.initMixin()
  },
  methods: {
    async nextAction() {
      let self = this
      let currentStep = this.getCurrentStepMeta

      if (currentStep.ref) {
        await this.$refs[currentStep.ref].validateAndSubmit().then(res => {
          if (res) {
            self.setFormData(currentStep.ref)
            if (self.currentStep < self.fundTransferSteps.length) {
              self.currentStep++
            }
          }
        })
      }
    },
    backAction() {
      if (this.currentStep <= 1) {
        this.$router.push({ name: 'EWalletHome' })
      } else {
        this.currentStep = this.currentStep - 1
      }
    },
    propsBindingFactory(details) {
      let dataQaPrefix = this.dataQaPrefix
      let { member_id, name } = this.getMyAccountMemberDetails.details

      if (details.ref === 'fundTransferForm') {
        details['bind'] = {
          dataQaPrefix,
        }
      } else if (details.ref === 'confirmationForm') {
        details['bind'] = {
          dataQaPrefix,
          fundTransferDetails: {
            fromName: name,
            fromIbo: member_id,
            ...this.fundTransferFormData,
          },
        }
      } else if (details.ref === 'receiptForm') {
        details['bind'] = {
          dataQaPrefix,
          receiptDetails: {
            fromName: name,
            fromIbo: member_id,
            ...this.fundTransferFormData,
          },
        }
      }

      return details
    },
    setFormData(key) {
      if (key === 'fundTransferForm' || key === 'confirmationForm') {
        this.fundTransferFormData = { ...this.$refs[key].getComponentModelData() }
      }
    },
  },
}
</script>
