<template>
  <b-container>
    <b-modal
      size="sm"
      id="confirm_reset_pin"
      :ok-title="$t('Common.Ok')"
      :cancel-title="$t('Common.Cancel')"
      class="eshop-model"
      hide-header
      centered
      no-close-on-backdrop
      @ok="openResetPin"
    >
      <div>{{ $t('Common.Security.ResetSecurityPinConfirmationText') }}</div>
    </b-modal>
    <b-modal size="sm" ref="error_request_otp" class="eshop-model" ok-only hide-header centered no-close-on-backdrop>
      <div v-for="(msg, msgIndex) in getMobileVerificationMessage" :key="msgIndex">{{ msg }}<br /></div>
    </b-modal>
    <b-modal
      ref="reset_pin_modal"
      size="lg"
      centered
      no-close-on-esc
      no-close-on-backdrop
      hide-header-close
      @shown="focusOnCode"
      :title="$t('Wallet.ResetSecurityPin')"
    >
      <b-container>
        <div class="row text-primary">
          {{ $t('EWallet.Activation.SecondStepTitle') }}
          {{
            getMyAccountMemberDetails.contact_info.mobile_1_num
              .toString()
              .slice(
                getMyAccountMemberDetails.contact_info.mobile_1_num.toString().length - 4,
                getMyAccountMemberDetails.contact_info.mobile_1_num.toString().length
              )
          }}
        </div>
        <b-row class="my-2">
          <b-col class="col-12 col-md-4 px-0">
            <label class="required pt-2">
              {{ $t('Common.Security.VerificationCode') }}
            </label>
          </b-col>
          <b-col class="col col-md-4 col-xl-4 px-0">
            <b-form-input
              v-validate="'required|numeric'"
              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>
            <span
              v-show="getMobileVerificationStatus"
              v-for="(msg, msgIndex) in getMobileVerificationMessage"
              class="help is-danger"
              :key="msgIndex"
            >
              {{ msg }}<br />
            </span>
          </b-col>
        </b-row>
      </b-container>
      <div slot="modal-footer" class="w-100">
        <b-row class="my-0 py-0">
          <b-col class="text-left p-0">
            <b-btn variant="link" class="text-left p-0" :disabled="resendCodeClicked" @click="resendCode">
              {{ $t('EWallet.ResendVerificationCode') }}
            </b-btn>
            <span v-show="getResendCodeStatus" class="help is-danger animated flash">
              <br />{{ $t('EWallet.GlobalWords.ResendCodeMessage') }}
            </span>
            <span v-show="!getResendCodeStatus" class="help text-info-green animated flash">
              <br />{{ $t('EWallet.GlobalWords.ResendCodeMessageOk') }}
            </span>
          </b-col>
          <b-col class="text-right align-text-bottom">
            <b-btn variant="outline-primary" @click="closeMe">
              {{ $t('EWallet.GlobalWords.Cancel') }}
            </b-btn>
            <b-btn variant="primary" @click="showNextResetPage">
              {{ $t('Eshop.Order.GlobalWords.Next') }}
            </b-btn>
          </b-col>
        </b-row>
      </div>
    </b-modal>
    <b-modal
      ref="new_pin_modal"
      size="lg"
      centered
      no-close-on-esc
      no-close-on-backdrop
      hide-header-close
      @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 px-0">
          <b-col xl="5">
            <label class="required pt-2">
              {{ $t('Common.Security.SecurityPin') }}
            </label>
          </b-col>
          <b-col sm="5">
            <b-form-input
              v-validate="'required|digits:6'"
              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">
              {{ $t('Eshop.Order.ResetPage.PinMustContain6Digit') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2 px-0">
          <b-col xl="5">
            <label class="required pt-2">
              {{ $t('EWEWallet.ReEnterSecurityPin') }}
            </label>
          </b-col>
          <b-col sm="5">
            <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>
            <span v-show="getEwalletSecurityPinInfo.status" class="help is-danger">
              {{ getEwalletSecurityPinInfo.message }}
            </span>
          </b-col>
        </b-row>
        <b-row class="px-0">
          <b-col>
            <span class="note-message">
              {{ $t('EWallet.SetupSecurityPin.Description') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="px-0">
          <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 variant="outline-primary" @click="closeModal">
          {{ $t('Eshop.Order.GlobalWords.Cancel') }}
        </b-btn>
        <b-btn variant="primary" @click="validateNewPin">
          {{ $t('Eshop.Order.GlobalWords.Confirm') }}
        </b-btn>
      </div>
    </b-modal>
    <b-modal size="sm" ok-only hide-header class="eshop-model" :ok-title="$t('Common.Ok')" ref="notice_ok" centered>
      <div>{{ $t('Common.Security.SecurityPinUpdate.Success') }}</div>
    </b-modal>
  </b-container>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Orderreviewresetpin',
  $_veeValidate: {
    validator: 'new',
  },
  components: {},
  props: {},
  data() {
    return {
      VerificationCode: '',
      SecurityPIN: '',
      RetypeSecurityPIN: '',
      resendCodeClicked: false,
      codeTimeout: 0,
    }
  },
  mounted() {},
  methods: {
    ...mapActions('eshop', ['setOrderStep', 'cancelOrderStep', 'setEwalletAmount']),
    ...mapActions(['validateMobile', 'resetSecurityPin', 'setResendCode']),
    openResetPin: function() {
      let data = {
        mobile_1_country_code_id: this.getMyAccountMemberDetails.contact_info.mobile_1_country_code_id,
        mobile_1_num: this.getMyAccountMemberDetails.contact_info.mobile_1_num,
      }
      this.validateMobile(data).then(result => {
        if (result) {
          this.$refs.reset_pin_modal.show()
        } else {
          this.$refs.error_request_otp.show()
        }
      })
    },
    resendCode() {
      this.resendCodeClicked = true
      let data = {
        mobile_1_country_code_id: this.getMyAccountMemberDetails.contact_info.mobile_1_country_code_id,
        mobile_1_num: this.getMyAccountMemberDetails.contact_info.mobile_1_num,
      }
      this.validateMobile(data).then(res => {
        if (res) {
          setTimeout(() => {
            this.setResendCode(true)
            this.resendCodeClicked = false
          }, 300000)
        } else {
          this.resendCodeClicked = false
          this.setResendCode(false)
        }
      })
    },
    showNextResetPage: function() {
      this.$validator.validate('Verification Code', this.VerificationCode).then(valid => {
        if (valid) {
          let data = {
            mobile_1_country_code_id: this.getMyAccountMemberDetails.contact_info.mobile_1_country_code_id,
            mobile_1_num: this.getMyAccountMemberDetails.contact_info.mobile_1_num,
            code: this.VerificationCode,
            request_type: 'validate',
          }
          this.validateMobile(data).then(result => {
            if (result) {
              this.$refs.reset_pin_modal.hide()
              this.$refs.new_pin_modal.show()
            }
          })
        }
      })
    },
    closeMe: function() {
      this.setResendCode(true)
      this.VerificationCode = ''
      this.$refs.reset_pin_modal.hide()
    },
    closeModal: function() {
      this.setResendCode(true)
      this.VerificationCode = ''
      this.SecurityPIN = ''
      this.RetypeSecurityPIN = ''
      this.$refs.new_pin_modal.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) {
              let data = {
                security_pin: this.SecurityPIN,
                security_pin_confirmation: this.RetypeSecurityPIN,
              }
              this.resetSecurityPin(data).then(result => {
                if (result) {
                  this.$refs.new_pin_modal.hide()
                  this.$refs.notice_ok.show()
                }
              })
            }
          })
        }
      })
    },
  },
  computed: {
    ...mapGetters('eshop', ['getOrderStep']),
    ...mapGetters([
      'getErrors',
      'getEWalletBalance',
      'getMyAccountMemberDetails',
      'getMobileVerificationMessage',
      'getMobileVerificationStatus',
      'getEwalletSecurityPinInfo',
      'getResendCodeStatus',
    ]),
  },
}
</script>
