<template>
  <b-modal
    id="fundwithdrawal-modal"
    v-model="eWalletShowModal"
    size="md"
    no-close-on-backdrop
    :title="$t('EWallet.FundWithdrawal.ModalTitle')"
    title-tag="h6"
    centered
    header-class="ewallet-fundwithdrawal-modal-title"
  >
    <b-container class="ewallet-fundwithrdrawal-modal-body">
      <b-form-group v-if="getEwalletCurrencyCode === 'MYR' || getEwalletCurrencyCode === 'KHR'">
        <b-form-radio-group
          id="withdrawaltype"
          name="bankradio"
          v-model="paymentType"
          :options="options"
          @change="handleChange"
        />
      </b-form-group>
      <keep-alive>
        <component :is="paymentType" v-model="paymentData" />
      </keep-alive>
    </b-container>
    <div slot="modal-footer" class="">
      <b-btn variant="outline-primary" @click="hideModal">
        {{ $t('EWallet.GlobalWords.Cancel') }}
      </b-btn>
      <b-btn variant="primary" class="ml-2" @click="next">
        {{ $t('EWallet.GlobalWords.Save') }}
      </b-btn>
    </div>
  </b-modal>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import mBankComponent from './MBankComponent'
import mPayComponent from './MPayComponent'
import _ from 'lodash'
export default {
  name: 'BankMpayModal',
  components: {
    mBankComponent,
    mPayComponent,
  },
  $_veeValidate: {
    validator: 'new',
  },
  data() {
    return {
      paymentType: 'mBankComponent',
      options: [
        { text: 'BANK', value: 'mBankComponent', selected: true },
        { text: 'MPAY', value: 'mPayComponent' },
      ],
      paymentData: null,
    }
  },
  mounted() {
    this.loadMyAccountInfo()
    this.loadCountryDynamicContent()
    this.initializeBankMpaySetup()
  },
  methods: {
    ...mapActions([
      'processFund',
      'initializeBankMpaySetup',
      'loadMyAccountInfo',
      'loadCountryDynamicContent',
      'updateMemberDetails',
    ]),
    ...mapMutations(['SET_EWALLET_FUND_TRANSFER_STATUS', 'SET_EWALLET_SHOW_MODAL', 'SET_EWALLET_PAYMENT_TYPE']),
    hideModal() {
      this.SET_EWALLET_SHOW_MODAL(false)
    },
    async next() {
      let localMemberDetail = _.cloneDeep(this.getMyAccountMemberDetails)
      let update = false
      if (this.getEwalletPaymentType === 'mBankComponent') {
        await this.$validator.validateAll(null, 'bankScope').then(valid => {
          if (valid) {
            localMemberDetail.banking.payment_data.selected = 1
            localMemberDetail.banking.payment_data.bank_data[0].fields[1].value = this.paymentData.bankInfo.bId
            localMemberDetail.banking.payment_data.bank_data[0].fields[3].value = this.paymentData.bankInfo.swiftCode
            localMemberDetail.banking.payment_data.bank_data[0].fields[2].value = this.paymentData.accountHolderName
            localMemberDetail.banking.payment_data.bank_data[0].fields[5].value = this.paymentData.accountNumber
            update = true
          }
        })
      } else {
        await this.$validator.validateAll(null, 'mpayScope').then(valid => {
          if (valid) {
            localMemberDetail.banking.payment_data.selected = 2
            localMemberDetail.banking.payment_data.bank_data[1].fields[1].value = this.paymentData.cardHolderName
            localMemberDetail.banking.payment_data.bank_data[1].fields[2].value = this.paymentData.cardNumber
            localMemberDetail.banking.payment_data.bank_data[1].fields[3].value = this.paymentData.cardExpiryDate.month
            localMemberDetail.banking.payment_data.bank_data[1].fields[4].value = this.paymentData.cardExpiryDate.year
            update = true
          }
        })
      }
      if (update) {
        this.updateMemberDetails(localMemberDetail).then(res => {
          if (res) {
            this.SET_EWALLET_SHOW_MODAL(false)
            this.processFund(this.getShowModalProcessType)
          }
        })
      }
    },
    handleChange(selectedPaymentType) {
      this.errors.clear()
      this.SET_EWALLET_PAYMENT_TYPE(selectedPaymentType)
    },
  },
  computed: {
    ...mapGetters([
      'getEWalletShowModal',
      'getShowModalProcessType',
      'getEwalletPaymentType',
      'getEwalletCurrencyCode',
      'getMyAccountMemberDetails',
    ]),
    eWalletShowModal: {
      get: function() {
        return this.getEWalletShowModal
      },
      set: function(value) {},
    },
  },
}
</script>
