<template>
  <div class="d-flex justify-content-center animated fadeIn" v-can:view="'e-wallet'">
    <div class="dashboard-panel-element rounded-0 px-3 ewallet-activation">
      <keep-alive :max="2">
        <component :is="getCurrentStepMeta.component" v-bind="getCurrentStepMeta.bind" :ref="getCurrentStepMeta.ref">
          <div class="d-flex justify-content-center mb-3">
            <b-button
              v-if="getCurrentStepMeta.showBackBtn"
              size="lg"
              class="mr-3 px-5"
              @click="backAction"
              variant="outline-primary"
              :data-qa="`${dataQaPrefix}-back-btn`"
            >
              <span>{{ $t('Common.Back') }}</span>
            </b-button>
            <b-button
              v-if="getCurrentStepMeta.showNextBtn"
              variant="primary"
              size="lg"
              @click="nextAction"
              :disabled="getLoadingStatus"
              class="d-flex align-items-center px-5"
              :data-qa="`${dataQaPrefix}-${(getCurrentStepMeta.isSubmit && 'submit') || 'next'}-btn`"
            >
              <span>{{ $t((getCurrentStepMeta.isSubmit && 'Form.Submit') || 'Common.Next') }}</span>
              <b-spinner v-show="getLoadingStatus" small class="ml-2" />
            </b-button>
          </div>
        </component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'EWalletActivationWrapper',
  data() {
    return {
      currentStep: 1,
      activationSteps: [
        {
          step: 1,
          showBackBtn: false,
          showNextBtn: true,
          component: () => import('@/app/ewallet/activation/components/blocks/MobileActivationForm'),
          ref: 'mobilePhoneActivationScreen',
        },
        {
          step: 2,
          showBackBtn: true,
          showNextBtn: true,
          component: () => import('@/app/ewallet/_global/components/blocks/EWalletOtpVerificationForm'),
          ref: 'otpVerificationScreen',
        },
        {
          step: 3,
          showNextBtn: true,
          component: () => import('@/app/ewallet/_global/components/blocks/EWalletNewPinForm'),
          ref: 'newSecurityPinScreen',
        },
        {
          step: 4,
          isSubmit: true,
          showBackBtn: true,
          showNextBtn: true,
          component: () => import('@/app/ewallet/_global/components/blocks/EWalletReEnterPinForm'),
          ref: 'reEnterSecurityPinScreen',
        },
        {
          step: 5,
          component: () => import('@/app/ewallet/activation/components/blocks/ActivationSuccess'),
        },
      ],
      activationFormData: {
        mobile: {},
        initSecurityPin: '',
      },
      dataQaPrefix: 'eWallet-eWalletActivation',
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    getCurrentStepMeta() {
      let component = this.activationSteps.find(el => el.step === this.currentStep) || {}
      component = this.propsBindingFactory(component)
      return component
    },
    getLoadingStatus() {
      let loaders = [
        'requestingEWalletValidationCode',
        'validatingEWalletVerificationCode',
        'UpdatingEWalletSecurityPin',
      ]
      return this.isLoading(loaders)
    },
  },
  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.activationSteps.length) {
              self.currentStep++
            }
          }
        })
      }
    },
    backAction() {
      this.currentStep = this.currentStep - 1 || 1
    },
    propsBindingFactory(details) {
      if (details.ref === 'otpVerificationScreen') {
        details['bind'] = {
          class: ['mt-4'],
          activation: true,
          dataQaPrefix: this.dataQaPrefix,
          mobileObject: this.activationFormData.mobile,
        }
      } else if (details.ref === 'newSecurityPinScreen') {
        details['bind'] = {
          class: ['mt-4'],
          dataQaPrefix: this.dataQaPrefix,
        }
      } else if (details.ref === 'reEnterSecurityPinScreen') {
        details['bind'] = {
          class: ['mt-4'],
          dataQaPrefix: this.dataQaPrefix,
          initSecurityPin: this.activationFormData.initSecurityPin,
        }
      }
      return details
    },
    setFormData(key) {
      if (key === 'mobilePhoneActivationScreen') {
        this.activationFormData.mobile = { ...this.$refs[key].getComponentModelData() }
      } else if (key === 'newSecurityPinScreen') {
        this.activationFormData.initSecurityPin = this.$refs[key].getComponentModelData()
      }
    },
  },
}
</script>
