<template>
  <div id="ewallet-fund-container">
    <b-row class="ewallet-activation-title pt-0">
      {{ $t('EWallet.Title') }}
    </b-row>
    <b-row v-if="getEwalletActivation0Step" class="ewallet-fund-step-circle">
      <div class="normal-circle" :class="getStep1ClassObject">
        <span class="inner-text center-align">
          1
        </span>
      </div>
      <div class="line-step" />
      <div class="normal-circle" :class="getStep2ClassObject">
        <span class="inner-text center-align">
          2
        </span>
      </div>
      <div class="line-step" />
      <div class="normal-circle" :class="getStep3ClassObject">
        <span class="inner-text center-align">
          3
        </span>
      </div>
    </b-row>
    <div class="ewallet-activation-content" v-if="!getEwalletActivation0Step">
      <b-btn @click="handleActive">
        {{ $t('EWallet.Activation.ActivateEWallet') }}
      </b-btn>
    </div>
    <div v-if="getEwalletActivation0Step">
      <div class="ewallet-fund-step-title">
        {{ $t('EWallet.Activation.EWalletActivation') }}
      </div>
      <component :is="getEWalletFundStep" />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import fundFirstStep from './blocks/ActivationFirstStep'
import fundSecondStep from './blocks/ActivationSecondStep'
import fundThirdStep from './blocks/ActivationThirdStep'
export default {
  name: 'EwalletActivation',
  components: {
    fundFirstStep,
    fundSecondStep,
    fundThirdStep,
  },
  data() {
    return {
      activate: false,
      activeClass: 'active-step',
      circleText: 'circle-text',
      pl1: 'pl-1',
    }
  },
  mounted() {
    this.loadMyAccountInfo()
  },
  methods: {
    ...mapActions(['loadMyAccountInfo', 'requestNewCode', 'setFundStep', 'setEwalletActivation0Step']),
    handleActive() {
      this.setEwalletActivation0Step(true)
      if (this.getMyAccountMemberDetails !== null) {
        if (this.getMyAccountMemberDetails.contact_info.mobile_1_activated === 1) {
          this.setFundStep('fundThirdStep')
        } else {
          this.setFundStep('fundFirstStep')
        }
      } else {
        this.setFundStep('fundFirstStep')
      }
    },
  },
  computed: {
    ...mapGetters([
      'getEWalletFundStep',
      'getStep1ClassObject',
      'getStep2ClassObject',
      'getStep3ClassObject',
      'getMyAccountMemberDetails',
      'getEwalletActivation0Step',
    ]),
  },
}
</script>
