<template>
  <div>
    <div id="ewallet-fund-body">
      <b-container fluid>
        <div class="fund-first-step-body">
          <div class="activation-body-title">
            {{ $t('EWallet.Activation.FirstStepTitle') }}
          </div>
          <b-row>
            <b-col class="activation-first-step-title">
              <label class="required">
                {{ $t('EWallet.GlobalWords.MobilePhone') }}
              </label>
            </b-col>
            <b-col class="activation-first-step-content">
              <b-row>
                <b-col cols="5">
                  <b-form-select v-model="selectedCountryCode" size="md" class="select-country-code">
                    <option v-for="(temp, idx) in getCountriesCallCode" :value="temp.value" :key="idx">
                      {{ temp.text }}
                    </option>
                  </b-form-select>
                </b-col>
                <b-col cols="7" class="pl-md-0">
                  <b-form-input
                    size="md"
                    v-validate="'required|numeric'"
                    type="text"
                    v-model="mobilePhone"
                    name="Mobile Phone"
                    class="mb-2"
                    @input="handleInput"
                    :class="{
                      input: true,
                      'mobile-number': true,
                      'is-danger': errors.has('Mobile Phone') || getMobileVerificationStatus,
                    }"
                  />
                  <span v-show="errors.has('Mobile Phone')" class="help is-danger pl-2 d-block">
                    {{ errors.first('Mobile Phone') }}
                  </span>
                  <template v-for="(msg, msgIndex) in getMobileVerificationMessage"
                    ><span
                      v-if="getMobileVerificationStatus && typeof getMobileVerificationMessage !== 'string'"
                      class="help is-danger pl-2 d-block"
                      :key="msgIndex"
                    >
                      {{ msg }} <br /> </span
                  ></template>
                  <span
                    v-if="getMobileVerificationStatus && typeof getMobileVerificationMessage === 'string'"
                    class="help is-danger pl-2 d-block"
                  >
                    {{ getMobileVerificationMessage }} <br />
                  </span>
                </b-col>
              </b-row>
            </b-col>
          </b-row>
        </div>
        <b-row class="fund-first-step-footer">
          <b-btn @click="handleCancel">
            {{ $t('Common.Back') }}
          </b-btn>
          <b-btn class="ml-1" @click="next">
            {{ $t('EWallet.GlobalWords.Next') }}
          </b-btn>
        </b-row>
      </b-container>
    </div>
    <b-modal ref="diffMobileModal" class="eshop-model" size="sm" hide-header centered @ok="handleDiffMobile">
      <h5>{{ $t('EWallet.Activation.FirstStep.DiffMobile') }}</h5>
    </b-modal>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'ActivationFirstStep',
  components: {},
  $_veeValidate: {
    validator: 'new',
  },
  data() {
    return {
      mobilePhone: '',
      selectedCountryCode: 1,
    }
  },
  mounted() {
    this.fetchCountryList()
    this.mobilePhone =
      this.getTemporaryMobilePhone.mobile_1_num || this.getMyAccountMemberDetails.contact_info.mobile_1_num
  },
  methods: {
    ...mapActions([
      'setFundStep',
      'cancelFundStep',
      'fetchCountryList',
      'validateMobile',
      'setResendCode',
      'setVerificationStatus',
      'setEwalletActivation0Step',
    ]),
    handleInput() {
      this.setVerificationStatus(false)
    },
    handleCancel() {
      this.setEwalletActivation0Step(false)
      this.setFundStep('fundFirstStep')
    },
    handleDiffMobile() {
      let data = {
        mobile_1_country_code_id: this.selectedCountryCode,
        mobile_1_num: this.mobilePhone,
      }
      this.validateMobile(data).then(result => {
        if (result) {
          this.setFundStep('fundSecondStep')
          setTimeout(() => {
            this.setResendCode(true)
          }, 300000)
        }
      })
    },
    next() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          if (
            this.getTemporaryMobilePhone.mobile_1_num !== null &&
            this.getMyAccountMemberDetails.contact_info.mobile_1_num !== null &&
            this.mobilePhone !== this.getTemporaryMobilePhone.mobile_1_num &&
            this.mobilePhone !== this.getMyAccountMemberDetails.contact_info.mobile_1_num
          ) {
            this.$refs.diffMobileModal.show()
          } else {
            let data = {
              mobile_1_country_code_id: this.selectedCountryCode,
              mobile_1_num: this.mobilePhone,
            }
            this.validateMobile(data).then(result => {
              if (result) {
                this.setFundStep('fundSecondStep')
                setTimeout(() => {
                  this.setResendCode(true)
                }, 300000)
              }
            })
          }
        }
      })
    },
  },
  computed: {
    ...mapGetters([
      'getEWalletFundStep',
      'getMobileCountriesCodes',
      'getMobileVerificationStatus',
      'getMobileVerificationMessage',
      'getCountriesCallCode',
      'getMyAccountMemberDetails',
      'getTemporaryMobilePhone',
    ]),
  },
}
</script>
