<template>
  <div class="mt-4">
    <b-row class="text-center ewallet-form-field">
      <b-col cols="12">
        <h1 class="mb-1">{{ $t('EWallet.Activation.ActivationSuccess') }}</h1>
        <p class="pre-wrap">{{ $t('EWallet.Activation.ActivationSuccess.Msg') }}</p>
      </b-col>

      <b-col cols="12" class="my-4">
        <b-row>
          <b-col cols="12" class="mb-4">
            <b-img :src="successIcon" class="icon-size-6" />
          </b-col>
          <b-col cols="12">
            <b-button
              size="lg"
              variant="primary"
              @click="navigateToDashboard"
              data-qa="eWallet-activationSuccess-goToDashboard-btn"
            >
              <span>{{ $t('EWallet.Activation.ActivationSuccess.GoToDashboard') }}</span>
              <span v-if="getRemainingTime" class="pl-2">({{ getRemainingTime }})</span>
            </b-button>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import SuccessIcon from '@/assets/img/e-wallet-activation-success.svg'

let CountdownInterval = undefined

export default {
  name: 'ActivationSuccess',
  data() {
    return {
      remainingTime: 10,
      successIcon: SuccessIcon,
    }
  },
  computed: {
    getRemainingTime() {
      return this.remainingTime
    },
  },
  mounted() {
    this.initCountdown()
  },
  methods: {
    navigateToDashboard() {
      this.dismissCountdown()
      this.$router.push({ name: 'EWalletHome' })
    },
    initCountdown() {
      this.remainingTime = 10
      CountdownInterval = setInterval(() => {
        if (this.remainingTime) {
          this.remainingTime--
        } else {
          this.navigateToDashboard()
        }
      }, 1000)
    },
    dismissCountdown() {
      clearInterval(CountdownInterval)
      this.remainingTime = 0
    },
  },
}
</script>
