<template>
  <modal-template
    no-close-on-esc
    is-footer-hide
    no-close-on-backdrop
    :header-class="['border-0']"
    @modal-close="$emit('close')"
  >
    <template v-slot:body>
      <div>
        <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}-resetSecurityPinModal-back-btn`"
              >
                <span>{{ $t('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-5"
                :data-qa="
                  `${dataQaPrefix}-${(getCurrentStepMeta.isSubmit && 'submit') || 'next'}-resetSecurityPinModal-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>
    </template>
  </modal-template>
</template>

<script>
import { mapGetters } from 'vuex'
import ModalTemplate from '@/elements/common/components/modalTemplate'
export default {
  name: 'EWalletResetSecurityPinModal',
  components: { ModalTemplate },
  props: {
    id: { type: String, default: 'modal' },
    dataQaPrefix: { type: String, required: true },
    phoneNumberDetails: { type: Object, required: true },
  },
  data() {
    return {
      currentStep: 1,
      resetSecurityPinSteps: [
        {
          step: 1,
          showNextBtn: true,
          component: () => import('@/app/ewallet/_global/components/blocks/EWalletOtpVerificationForm'),
          ref: 'otpVerificationScreen',
        },
        {
          step: 2,
          showNextBtn: true,
          component: () => import('@/app/ewallet/_global/components/blocks/EWalletNewPinForm'),
          ref: 'newSecurityPinScreen',
        },
        {
          step: 3,
          isSubmit: true,
          showBackBtn: true,
          showNextBtn: true,
          component: () => import('@/app/ewallet/_global/components/blocks/EWalletReEnterPinForm'),
          ref: 'reEnterSecurityPinScreen',
        },
      ],
      formData: {
        initSecurityPin: '',
      },
    }
  },
  computed: {
    ...mapGetters(['isLoading']),
    getCurrentStepMeta() {
      let component = this.resetSecurityPinSteps.find(el => el.step === this.currentStep) || {}
      component = this.propsBindingFactory(component)
      return component
    },
    getLoadingStatus() {
      let loaders = [
        'UpdatingEWalletSecurityPin',
        'requestingEWalletValidationCode',
        'validatingEWalletVerificationCode',
      ]
      return this.isLoading(loaders)
    },
  },
  methods: {
    show() {
      this.$bvModal.show(this.id)
    },
    hide() {
      this.$bvModal.hide(this.id)
      this.$emit('close')
    },
    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.resetSecurityPinSteps.length) {
              self.currentStep++
            } else if (self.currentStep === self.resetSecurityPinSteps.length) {
              self.$swal({
                type: 'success',
                title: self.$t('Common.Security.SecurityPinUpdate.Success'),
                timer: '5000',
              })
              self.hide()
            }
          }
        })
      }
    },
    backAction() {
      this.currentStep = this.currentStep - 1 || 1
    },
    propsBindingFactory(details) {
      let dataQaPrefix = this.dataQaPrefix + '-resetSecurityPinModal'

      if (details.ref === 'otpVerificationScreen') {
        details['bind'] = {
          dataQaPrefix,
          class: ['mt-4'],
          requestVerification: true,
          mobileObject: this.phoneNumberDetails,
        }
      } else if (details.ref === 'newSecurityPinScreen') {
        details['bind'] = {
          dataQaPrefix,
          class: ['mt-4'],
          isResetSecurityPin: true,
        }
      } else if (details.ref === 'reEnterSecurityPinScreen') {
        details['bind'] = {
          dataQaPrefix,
          class: ['mt-4'],
          isResetSecurityPin: true,
          initSecurityPin: this.formData.initSecurityPin,
        }
      }
      return details
    },
    setFormData(key) {
      if (key === 'newSecurityPinScreen') {
        this.formData.initSecurityPin = this.$refs[key].getComponentModelData()
      }
    },
  },
}
</script>
