<template>
  <modal-template no-close-on-backdrop is-footer-hide no-close-on-esc :header-class="['border-0']">
    <template v-slot:body>
      <div class="text-center">
        <h1 class="m-0 text-black mb-2">{{ $t('EWallet.BankAccountSetup') }}</h1>
        <p>{{ $t('EWallet.BankAccountSetup.HelpText') }}</p>
      </div>

      <b-overlay :show="isBusy" variant="white" :class="[{ 'vh-50': isBusy }]" class="py-4" opacity="0.96" no-center>
        <template v-slot:overlay>
          <b-row class="justify-content-center my-5 py-5">
            <b-col cols="auto">
              <b-spinner class="mx-2 text-primary" />
              <strong class="h4">{{ $t('Common.Loading') }}</strong>
            </b-col>
          </b-row>
        </template>

        <bank-account-info
          class="col-lg-10 mx-auto"
          @submit="navigateToFundWithdraw"
          :save-button-label="$t('Form.Submit')"
          field-label-class="col-lg-4 text-lg-right"
          :save-button-class="['btn-lg', 'mx-auto', 'mt-3', 'px-5']"
          :data-qa-prefix="`${dataQaPrefix}-bankAccountSetupModal`"
        />
      </b-overlay>
    </template>
  </modal-template>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import ModalTemplate from '@/elements/common/components/modalTemplate'
import BankAccountInfo from '@/app/_global/components/blocks/BackAccountInfo'

export default {
  name: 'EWalletBankAccountSetupModal',
  components: { ModalTemplate, BankAccountInfo },
  props: {
    id: { type: String, default: 'modal' },
    dataQaPrefix: { type: String, required: true },
  },
  computed: {
    ...mapGetters(['isLoading']),
    isBusy() {
      return this.isLoading(['loadingCountryDynamicContent'])
    },
  },
  methods: {
    ...mapActions(['loadCountryDynamicContent']),
    show() {
      this.loadCountryDynamicContent()
      this.$bvModal.show(this.id)
    },
    navigateToFundWithdraw(valid) {
      valid && this.$router.push({ name: 'EWalletFundWithdrawal' })
    },
  },
}
</script>
