<template>
  <b-container>
    <b-modal id="confirm_reset_pin" class="eshop-model" centered @ok="openResetPin">
      <div>{{ $t('Common.Security.ResetSecurityPinConfirmationText') }}</div>
    </b-modal>
    <b-modal
      ref="reset_pin_modal"
      size="md"
      centered
      no-close-on-esc
      no-close-on-backdrop
      @shown="focusOnCode"
      :title="$t('Wallet.ResetSecurityPin')"
      header-class="reset-pin-modal-title"
    >
      <b-container>
        <span class="blue-message">
          {{ $t('Eshop.Order.ResetPage.PleaseEnterVerificationCode') }} {{ mobileNumber }}
        </span>
        <b-row class="my-2">
          <b-col xl="5">
            <label class="required">
              {{ $t('Common.Security.VerificationCode') }}
            </label>
          </b-col>
          <b-col md="8" xl="6">
            <b-form-input
              v-validate="'required'"
              name="Verification Code"
              v-model="verificationCode"
              :class="{ input: true, 'is-danger': errors.has('Verification Code') }"
              ref="focusOnVerificationCode"
              type="text"
            />
            <span v-show="errors.has('Verification Code')" class="help is-danger">
              {{ errors.first('Verification Code') }}
            </span>
          </b-col>
        </b-row>
      </b-container>
      <div slot="modal-footer" class="order-modal-footer">
        <b-btn class="btn-cancel" @click="closeMe">
          {{ $t('Common.Back') }}
        </b-btn>
        <b-btn class="btn-next" @click="showNextResetPage">
          {{ $t('Eshop.Order.GlobalWords.Next') }}
        </b-btn>
      </div>
    </b-modal>
    <b-modal
      ref="new_pin_modal"
      size="md"
      centered
      no-close-on-esc
      no-close-on-backdrop
      @shown="focusOnPin"
      :title="$t('Wallet.ResetSecurityPin')"
      header-class="reset-pin-modal-title"
    >
      <b-container>
        <span class="blue-message">
          {{ $t('Eshop.Order.ResetPage.PleaseKeyInNewPin') }}
        </span>
        <b-row class="my-2">
          <b-col xl="5">
            <label class="required">
              {{ $t('Common.Security.SecurityPin') }}
            </label>
          </b-col>
          <b-col sm="7">
            <b-form-input
              v-validate="'required'"
              name="Security Pin"
              v-model="securityPIN"
              :class="{ input: true, 'is-danger': errors.has('Security Pin') }"
              ref="focusOnSecurityPin"
              type="password"
            />
            <span v-show="errors.has('Security Pin')" class="help is-danger">
              {{ errors.first('Security Pin') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col xl="5">
            <label class="required">
              {{ $t('EWEWallet.ReEnterSecurityPin') }}
            </label>
          </b-col>
          <b-col sm="7">
            <b-form-input
              v-validate="'required|confirmed:Security Pin'"
              name="Retype Security Pin"
              v-model="retypeSecurityPIN"
              :class="{ input: true, 'is-danger': errors.has('Retype Security Pin') }"
              type="password"
            />
            <span v-show="errors.has('Retype Security Pin')" class="help is-danger">
              {{ errors.first('Retype Security Pin') }}
            </span>
          </b-col>
        </b-row>
        <b-row>
          <b-col>
            <span class="note-message">
              {{ $t('EWallet.SetupSecurityPin.Description') }}
            </span>
          </b-col>
        </b-row>
        <b-row>
          <b-col>
            <span class="note-message" v-html="$t('Eshop.Order.ResetPage.ResetNote2')" />
          </b-col>
        </b-row>
      </b-container>
      <div slot="modal-footer" class="order-modal-footer">
        <b-btn class="btn-cancel" @click="closeModal">
          {{ $t('Eshop.Order.GlobalWords.Cancel') }}
        </b-btn>
        <b-btn class="btn-next" @click="validateNewPin">
          {{ $t('Eshop.Order.GlobalWords.Save') }}
        </b-btn>
      </div>
    </b-modal>
    <b-modal ok-only class="eshop-model" ref="notice_ok" centered @ok="closeOk">
      <div>{{ $t('Common.Security.SecurityPinUpdate.Success') }}</div>
    </b-modal>
  </b-container>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'PaymentEWalletResetPin',
  components: {},
  props: {
    eWalletMobileNumber: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      verificationCode: '',
      securityPIN: '',
      retypeSecurityPIN: '',
      mobileNumber: '',
    }
  },
  mounted() {
    let sl = this.eWalletMobileNumber.length
    if (sl > 4) {
      this.mobileNumber = ''
      for (var i = 0; i < sl; i++) {
        if (i < sl - 4) {
          this.mobileNumber += 'x'
        } else {
          this.mobileNumber += this.eWalletMobileNumber.charAt(i)
        }
      }
    } else {
      this.mobileNumber = this.eWalletMobileNumber
    }
  },
  methods: {
    ...mapActions([]),
    openResetPin: function() {
      this.$refs.reset_pin_modal.show()
    },
    showNextResetPage: function() {
      this.$validator.validate('Verification Code', this.verificationCode).then(valid => {
        if (valid) {
          // TOTO: ADD CODE TO VERIFY CODE
          this.$refs.reset_pin_modal.hide()
          this.$refs.new_pin_modal.show()
        }
      })
    },
    closeMe: function() {
      this.$refs.reset_pin_modal.hide()
    },
    closeModal: function() {
      this.$refs.new_pin_modal.hide()
    },
    closeOk: function() {
      this.$refs.notice_ok.hide()
    },
    focusOnCode: function() {
      this.$refs.focusOnVerificationCode.focus()
    },
    focusOnPin: function() {
      this.$refs.focusOnSecurityPin.focus()
    },
    validateNewPin: function() {
      this.$validator.validate('Security Pin', this.securityPIN).then(valid => {
        if (valid) {
          this.$validator.validate('Retype Security Pin', this.retypeSecurityPIN).then(retype => {
            if (retype) {
              // TODO: ADD CODE TO UPDATE PIN
              this.$refs.new_pin_modal.hide()
              this.$refs.notice_ok.show()
            }
          })
        }
      })
    },
  },
  computed: {
    ...mapGetters(['getLoggedInUser']),
  },
}
</script>
