<template>
  <b-modal
    ref="myModalRef"
    hide-footer
    v-model="showModal"
    title="Forgot Security PIN"
    no-close-on-backdrop
    @hide="hideEvent"
  >
    <div class="d-block text-center ewallet-security-pin-body">
      <b-row>
        <b-col>{{ $t('EWallet.GlobalWords.NewSecurityPin') }}</b-col>
        <b-col>
          <b-form-input
            size="sm"
            type="password"
            v-model="newPin"
            v-validate="'numeric'"
            name="Security Pin"
            :class="{ input: true, 'is-danger': errors.has('Security Pin') }"
          />
          <span v-show="errors.has('Security Pin')" class="help is-danger">
            {{ errors.first('Security Pin') }}
          </span>
        </b-col>
      </b-row>
      <b-row>
        <b-col>{{ $t('EWallet.ReEnterSecurityPin') }}</b-col>
        <b-col>
          <b-form-input
            size="sm"
            type="password"
            v-model="retypeNewPin"
            v-validate="'numeric'"
            name="Retype Security Pin"
            :class="{ input: true, 'is-danger': errors.has('Retype Security Pin') }"
          />
          <span v-show="errors.has('Retype Security Pin')" class="help is-danger">
            {{ errors.first('Retype Security Pin') }}
          </span>
          <span v-show="getEwalletSecurityPinInfo.status" class="help is-danger">
            {{ getEwalletSecurityPinInfo.message }}
          </span>
        </b-col>
      </b-row>
    </div>
    <b-btn class="mt-3" variant="outline-primary" block @click.prevent="changePin">
      {{ $t('EWallet.GlobalWords.Change') }}
    </b-btn>
  </b-modal>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'ForgotSecurityPin',
  data() {
    return {
      newPin: null,
      retypeNewPin: null,
    }
  },
  mounted() {},
  created() {},
  methods: {
    ...mapActions(['resetSecurityPin']),
    ...mapMutations(['SET_EWALLET_SECURITY_PIN_MODAL', 'SET_FORGOT_SECURITY_PIN_INFO']),
    changePin() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          let data = {
            security_pin: this.newPin,
            security_pin_confirmation: this.retypeNewPin,
          }
          this.resetSecurityPin(data).then(result => {
            if (result) {
              this.SET_EWALLET_SECURITY_PIN_MODAL(false)
            }
          })
        }
      })
    },
    hideEvent() {
      this.SET_EWALLET_SECURITY_PIN_MODAL(false)
      this.SET_FORGOT_SECURITY_PIN_INFO({ status: false, message: '' })
      this.errors.clear()
      this.newPin = null
      this.retypeNewPin = null
    },
  },
  computed: {
    ...mapGetters(['getEwalletSecurityPinModal', 'getEwalletSecurityPinInfo']),
    showModal: {
      get: function() {
        return this.getEwalletSecurityPinModal
      },
      set: function(value) {},
    },
  },
}
</script>
