<template>
  <div>
    <b-row class="text-center ewallet-form-field">
      <b-col cols="12">
        <h1 class="mb-1">{{ $t('EWallet.ReEnterSecurityPin') }}</h1>
        <p>{{ $t('EWallet.ReEnterSecurityPin.Description') }}</p>
      </b-col>

      <b-col cols="12" class="mt-4 mb-5">
        <b-row class="justify-content-center">
          <b-col cols="auto" class="mb-2">
            <!--TODO: improve UX by limiting only numeric input-->
            <b-form-input
              maxlength="6"
              type="password"
              v-model="securityPin"
              :disabled="fieldsLock"
              name="Re-enter Security Pin"
              v-validate="'required|digits:6'"
              class="rounded-1 text-center mr-2"
              :data-vv-as="$t('EWallet.ReEnterSecurityPin')"
              :state="!(customError || errors.has('Re-enter Security Pin')) && null"
              :data-qa="`${dataQaPrefix}-reEnterPin-reEnterSecurityPin-input`"
            />
          </b-col>
          <b-col cols="12" class="text-danger mb-2">
            <div v-if="errors.has('Re-enter Security Pin')">{{ errors.first('Re-enter Security Pin') }}</div>
            <div v-else-if="customError">{{ customError }}</div>
            <div v-else class="text-black-50">{{ $t('EWallet.SetupSecurityPin.HelpText') }}</div>
          </b-col>
        </b-row>
      </b-col>

      <b-col cols="12" class="mt-auto">
        <slot />
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'EWalletReEnterPinForm',
  $_veeValidate: {
    validator: 'new',
  },
  props: {
    isResetSecurityPin: { type: Boolean, default: false },
    initSecurityPin: { type: String, required: true },
    dataQaPrefix: { type: String, required: true },
  },
  data() {
    return {
      securityPin: '',
      customError: '',
      fieldsLock: false,
    }
  },
  deactivated() {
    this.$nextTick(() => {
      this.securityPin = ''
      this.$validator.reset()
    })
  },
  watch: {
    securityPin() {
      this.customError = ''
      this.$validator.reset()
    },
  },
  computed: {
    ...mapGetters(['getErrors']),
  },
  methods: {
    ...mapActions(['setEWalletSecurityPin']),
    async validateAndSubmit() {
      let self = this
      self.fieldsLock = true

      return await self.$validator.validate().then(async valid => {
        let result = valid

        if (result) {
          if (self.securityPin.toString() === self.initSecurityPin) {
            let payload = {
              securityPin: self.initSecurityPin.toString(),
              reConfirmSecurityPin: self.securityPin.toString(),
              activation: !self.isResetSecurityPin,
            }

            await self.setEWalletSecurityPin(payload).then(res => {
              if (!res) {
                self.$swal({
                  type: 'error',
                  title: self.$t(
                    (self.isResetSecurityPin && 'EWallet.ResetSecurityPin.ActionFailed') ||
                      'EWallet.SetupSecurityPin.ActionFailed'
                  ),
                  text: self.getErrors('setEWalletPin') || self.$t('Common.Error.ActionFailure.HelpText'),
                })

                result = false
              }
            })
          } else {
            self.customError = self.$t('EWallet.ReEnterSecurityPin.PinNotMatchError.msg')
            result = false
          }
        }

        self.fieldsLock = false
        return result
      })
    },
  },
}
</script>
