<template>
  <div>
    <div class="ewallet-fund-step-title">
      {{ $t('EWallet.GlobalWords.Step2') }}
      {{ $t('EWallet.FundTransfer.ConfirmationFormStepDescription') }}
    </div>
    <div id="ewallet-fund-body">
      <b-container fluid>
        <div class="fund-first-step-body">
          <b-row>
            <b-col class="ew-lbl">
              <label> {{ $t('EWallet.Amount') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <label class="label-content">
                {{ $helpers.getCurrencyValue(getEwalletFundTransferInfo.amount) }}
              </label>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label> {{ $t('Common.From') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <label class="label-content">
                {{ getEwalletFundTransferInfo.from }}
              </label>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label> {{ $t('EWallet.FundTransfer.TOI') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <label class="label-content">
                {{ getEwalletFundTransferInfo.TOI }}-{{ getEwalletFundTransferInfo.TOI2 }}
              </label>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label size="sm"> {{ $t('EWallet.TransactionForm.RecipientEmail') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <label class="label-content">
                {{ getEwalletFundTransferInfo.recipientEmail }}
              </label>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label size="sm"> {{ $t('EWallet.TransactionForm.RecipientReference') }}: </label>
            </b-col>
            <b-col class="ew-cnt">
              <label class="label-content">
                {{ getEwalletFundTransferInfo.recRef }}
              </label>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl">
              <label class="required"> {{ $t('EWallet.GlobalWords.SecurityPin') }} </label>:
            </b-col>
            <b-col class="ew-cnt">
              <b-form-input
                size="sm"
                type="password"
                v-model="securityPin"
                name="Security Pin"
                v-validate="'required|numeric'"
                @focus.native="resetError"
                :class="{
                  input: true,
                  'is-danger': errors.has('Security Pin') || getEwalletFundTransferStatus || secPinStatus,
                }"
              />
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl" />
            <b-col class="ew-cnt">
              <span v-show="errors.has('Security Pin')" class="help is-danger">
                {{ secPinError(errors) }}
              </span>
              <span
                v-show="getEwalletFundTransferStatus"
                v-for="(msg, msgIdx) in getEwalletFundTransferMessage"
                class="help is-danger"
                :key="msgIdx"
              >
                {{ msg }}<br />
              </span>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="ew-lbl" />
            <b-col class="ew-cnt">
              <a href="#" v-b-modal.confirm_reset_pin>
                {{ $t('Common.Security.ForgotSecurityPin') }}
              </a>
            </b-col>
          </b-row>
        </div>
        <b-row class="justify-content-center justify-content-md-end pr-3">
          <b-btn @click="cancelFundStep('fundFirstStep')" variant="outline-dark" class="px-4">
            {{ $t('Common.Back') }}
          </b-btn>
          <b-btn
            class="ml-1 px-4"
            variant="outline-primary"
            :disabled="isLoading('createEwalletTransaction')"
            @click="next"
          >
            {{ $t('EWallet.GlobalWords.Confirm') }}
          </b-btn>
        </b-row>
      </b-container>
      <orderPaymentResetPin />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import Vue from 'vue'
import orderPaymentResetPin from '@/app/eshop/order/components/blocks/OrderPaymentResetPin'
export default {
  name: 'FundtransferSecondStep',
  $_veeValidate: {
    validator: 'new',
  },
  components: {
    orderPaymentResetPin,
  },
  data() {
    return {
      securityPin: '',
      secPinStatus: false,
      secPinErrorMsg: '',
    }
  },
  mounted() {},
  methods: {
    ...mapActions(['setFundStep', 'cancelFundStep', 'createNewFundTransfer']),
    ...mapMutations(['SET_EWALLET_FUND_TRANSFER_STATUS', 'SET_EWALLET_SECURITY_PIN_MODAL']),
    resetError() {
      this.SET_EWALLET_FUND_TRANSFER_STATUS(false)
    },
    secPinError(errorObj) {
      if (errorObj.items.length > 0) {
        if (errorObj.items[0].field === 'Security Pin') {
          if (errorObj.items[0].rule === 'required') {
            return Vue.i18n.translate('EWallet.GlobalWords.AmountRequiredError')
          } else {
            return Vue.i18n.translate('EWallet.GlobalWords.SecurityPinErrorFormat')
          }
        }
      }
    },
    next() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          let mData = {
            transfer_to_user_id: this.getEwalletFundTransferInfo.toUserId,
            amount: this.getEwalletFundTransferInfo.amount,
            recipient_email: this.getEwalletFundTransferInfo.recipientEmail,
            recipient_reference: this.getEwalletFundTransferInfo.recRef,
            security_pin: this.securityPin,
          }
          this.createNewFundTransfer(mData).then(result => {
            if (result) {
              this.setFundStep('fundThirdStep')
            }
          })
        }
      })
    },
  },
  computed: {
    ...mapGetters([
      'isLoading',
      'getEWalletFundStep',
      'getEwalletFundTransferInfo',
      'getEwalletFundTransferStatus',
      'getEwalletFundTransferMessage',
    ]),
  },
}
</script>
