<template>
  <div class="ewallet" v-can:view="'e-wallet'">
    <div class="dashboard-panel-element rounded-0 px-3">
      <b-row class="mt-3 align-items-center">
        <b-col cols="12" md="auto" class="mb-2">
          <e-wallet-balance-indicator :balance="getEWalletBalance" :is-busy="isLoading('loadingEWalletDetails')" />
        </b-col>

        <b-col class="text-right mb-2">
          <b-row class="float-right" v-if="isLoading('loadingEWalletDetails')">
            <b-col class="px-0">
              <b-skeleton type="button" class="py-3 px-5"></b-skeleton>
            </b-col>
            <b-col>
              <b-skeleton type="button" class="py-3 px-5"></b-skeleton>
            </b-col>
          </b-row>

          <div v-else>
            <b-button
              variant="primary"
              class="py-3 mr-2"
              @click="navigateToFundWithdrawal"
              data-qa="eWallet-dashboard-fundWithdraw-btn"
            >
              <div>
                <icon
                  v-if="requiredBankAccountSetup"
                  name="exclamation-triangle"
                  class="mr-2 text-warning animated infinite flash slow"
                />
                <span>{{ $t('EWallet.FundWithdrawal') }}</span>
              </div>
            </b-button>
            <b-button
              class="py-3"
              variant="green"
              :to="{ name: 'EWalletFundTransfer' }"
              data-qa="eWallet-dashboard-fundTransfer-btn"
            >
              <span>{{ $t('EWallet.FundTransfer') }}</span>
            </b-button>
          </div>
        </b-col>
      </b-row>
    </div>

    <tabs-template
      v-if="isEWalletActivated"
      :links="transactionTabs"
      :menu-title="getTabTitle"
      class="responsive-tab mt-4 animated fadeIn"
    >
      <div class="mt-3">
        <router-view />
      </div>
    </tabs-template>
    <e-wallet-bank-account-setup-modal ref="bankAccountSetupModal" data-qa-prefix="eWallet-dashboard" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getValue } from '@/helpers/variable-handling'
import TabsTemplate from '@/app/_global/components/templates/TabsTemplate'
import eWalletCommonMixin from '@/app/ewallet/_global/components/Mixins/eWalletCommonMixin'
import EWalletBalanceIndicator from '@/app/ewallet/_global/components/elements/EWalletBalanceIndicator'
import EWalletBankAccountSetupModal from '@/app/ewallet/dashboard/Components/blocks/eWalletBankAccountSetupModal'

export default {
  name: 'EWalletDashboard',
  mixins: [eWalletCommonMixin],
  components: { EWalletBankAccountSetupModal, EWalletBalanceIndicator, TabsTemplate },
  data() {
    return {
      transactionTabs: [
        {
          url: { name: 'EWalletTransactionHistoryPaginated' },
          title: this.$t('EWallet.TransactionHistory'),
        },
        {
          url: { name: 'EWalletTransferRecordPaginated' },
          title: this.$t('EWallet.EWalletTransferRecord'),
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['isLoading', 'getEWalletDetails', 'getMyAccountMemberDetails']),
    getTabTitle() {
      return this.$t(getValue(this.$store, 'state.route.meta.tabDisplayName', ''))
    },
  },
  async mounted() {
    await this.initMixin()
    let { missing, expired } = this.$route.query
    if (parseInt(missing)) {
      this.openBankSetupModal()
    } else if (parseInt(expired)) {
      this.showExpiredBankInfoErrorPopup()
    }
  },
  methods: {
    navigateToFundWithdrawal() {
      if (this.requiredBankAccountSetup) {
        this.isBankInfoExpired ? this.showExpiredBankInfoErrorPopup() : this.openBankSetupModal()
      } else {
        this.$router.push({ name: 'EWalletFundWithdrawal' })
      }
    },
    showExpiredBankInfoErrorPopup() {
      this.$swal({
        type: 'error',
        title: this.$t('EWallet.FundWithdrawal.bankInfoExpired'),
        text: this.$t('MyAccount.BonusInfo.ContactSupport'),
      })
    },
    openBankSetupModal() {
      this.$refs['bankAccountSetupModal'].show()
    },
  },
}
</script>
