<template>
  <div>
    <b-row>
      <b-col class="text-right">
        <b-button
          id="ewallet-faq"
          size="sm"
          variant="outline-light-extra"
          data-qa="ewallet-mobileActivation-faq-btn"
          class="rounded-circle px-1 border-0"
        >
          <icon name="question-circle" class="icon-size-3 text-primary" />
        </b-button>

        <b-popover
          variant="primary"
          target="ewallet-faq"
          triggers="hover focus"
          placement="rightbottom"
          :title="$t('EWallet.Activation.WhatCanEWalletDo')"
        >
          <ul class="pl-3">
            <li>{{ $t('EWallet.Activation.WhatCanEWalletDo.Aim1') }}</li>
            <li>{{ $t('EWallet.Activation.WhatCanEWalletDo.Aim2') }}</li>
            <li>{{ $t('EWallet.Activation.WhatCanEWalletDo.Aim3') }}</li>
            <li>{{ $t('EWallet.Activation.WhatCanEWalletDo.Aim4') }}</li>
            <li>{{ $t('EWallet.Activation.WhatCanEWalletDo.Aim5') }}</li>
            <li>{{ $t('EWallet.Activation.WhatCanEWalletDo.Aim6') }}</li>
            <li>{{ $t('EWallet.Activation.WhatCanEWalletDo.Aim7') }}</li>
          </ul>
        </b-popover>
      </b-col>
    </b-row>

    <b-row class="text-center ewallet-form-field">
      <b-col cols="12" class="mt-1">
        <h1 class="mb-1 mt-2">{{ $t('EWallet.Activation.MobileActivation.Title') }}</h1>
        <p class="pre-wrap">{{ $t('EWallet.Activation.MobileActivation.HelpText') }}</p>
      </b-col>

      <b-col cols="12" class="mt-4 mb-5">
        <b-row class="justify-content-center">
          <b-col md="auto" class="mb-2 pr-md-0">
            <b-form-select
              v-validate="'required'"
              :disabled="fieldsLock"
              :options="callCodeList"
              name="Mobile Country Call Code"
              v-model="mobilePhone.countryCode"
              :data-vv-as="$t('Common.Contact.CountryCallCode')"
              :state="!errors.has('Mobile Country Call Code') && null"
              data-qa="eWallet-mobileActivation-mobileCountryCallCode-select"
            />
          </b-col>

          <b-col md="auto" class="mb-2">
            <b-form-input
              type="number"
              class="rounded-1"
              name="Mobile Number"
              :disabled="fieldsLock"
              placeholder="e.g. 379858888"
              v-validate="'required|numeric'"
              v-model="mobilePhone.phoneNumber"
              :data-vv-as="$t('Common.Contact.MobileNumber')"
              :state="!(customError || errors.has('Mobile Number')) && null"
              data-qa="eWallet-mobileActivation-mobileNumber-input"
            />
          </b-col>

          <b-col cols="12" class="text-danger text-left text-md-center">
            <div v-if="errors.has('Mobile Country Call Code')">{{ errors.first('Mobile Country Call Code') }}</div>
            <div v-if="errors.has('Mobile Number')">{{ errors.first('Mobile Number') }}</div>
            <div v-if="customError">{{ customError }}</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'
import { PhoneMixin } from '@/app/_global/mixins'

export default {
  name: 'MobileActivationForm',
  $_veeValidate: {
    validator: 'new',
  },
  mixins: [PhoneMixin],
  computed: {
    ...mapGetters(['getSelectedCountry', 'getErrors']),
  },
  data() {
    return {
      fieldsLock: false,
      customError: '',
      mobilePhone: {
        countryCode: null,
        phoneNumber: null,
      },
    }
  },
  watch: {
    callCodeList: {
      handler(list) {
        if (!this.mobilePhone.countryCode && list.length > 0) {
          this.mobilePhone.countryCode =
            (list.find(item => item.call_code === this.getSelectedCountry.call_code) || {}).id || null
        }
      },
      immediate: true,
    },
    mobilePhone: {
      handler() {
        this.customError = ''
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions(['requestEWalletVerificationCode']),
    async validateAndSubmit() {
      let self = this
      self.fieldsLock = true

      return await self.$validator.validate().then(async valid => {
        let result = valid
        if (result) {
          await self.requestEWalletVerificationCode(self.mobilePhone).then(res => {
            if (!res) {
              self.customError =
                this.getErrors('eWalletVerificationCodeRequest') || this.$t('Common.Error.ActionFailure.HelpText')
              result = false
            }
          })
        }
        self.fieldsLock = false
        return result
      })
    },
    getComponentModelData() {
      return this.mobilePhone
    },
  },
}
</script>
