<template>
  <div>
    <b-row>
      <b-col sm="12">
        <div class="card-title">
          {{ $t('Enrolment.Payee.Label') }}
        </div>
        <div class="card-text">
          <i>* {{ $t('Enrolment.PayeeWarning.Label') }}</i>
        </div>
        <div class="card-body">
          <b-form-radio-group id="payee-info" name="payeeradio1" v-model="payoutOption">
            <div class="col-12 ml-0 ml-md-3">
              <div class="row mx-3">
                <b-col class="col-6 col-sm-3 col-md-4 border py-2 pl-3" v-if="!hideBank">
                  <b-form-radio value="bankInfo">
                    {{ $t('Enrolment.Bank.Label') }}
                  </b-form-radio>
                </b-col>
                <b-col class="col-6 col-sm-3 col-md-4 py-2 pl-3 border-right border-bottom border-top" v-if="!hideMpay">
                  <b-form-radio value="MPayInfo">
                    {{ $t('Enrolment.MPay.Label') }}
                  </b-form-radio>
                </b-col>
              </div>
            </div>
            <div v-if="payoutOption == 'bankInfo'">
              <div v-for="(field, fieldIndex) in payeeInfoBankFields" :key="fieldIndex">
                <b-row class="pt-3 ml-0">
                  <b-col cols="11" md="3" lg="2" class="text-sm-left text-md-right pl-md-3 pl-0 pt-md-2">
                    <label :class="{ required: field.required }">
                      {{ (tLabel = $t('Dynamic.Address.' + $helpers.capitalCase(field.label), field.label)) }}
                    </label>
                  </b-col>
                  <b-col cols="12" md="7" lg="5" xl="4" class="pl-0 pl-md-3">
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Bank Country'"
                      v-model="bank.bank_country_name"
                      disabled
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Bank Account IC'"
                      v-model="bank.bank_account_ic"
                      disabled
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Swift Code'"
                      v-model="bank.swift_code"
                      disabled
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'A/C Holder Name'"
                      v-model="bank.account_holder_name"
                      @change="updateBankInfo()"
                    />
                    <b-form-select
                      v-model="bank.country_bank_id"
                      :options="getBankFormSelect"
                      @input="handleChangeBank(bank.country_bank_id)"
                      name="Bank"
                      v-if="field.type === 'select' && field.identifier == 'countries_bank'"
                    />
                    <b-form-select
                      :options="getOptions(field.identifier)"
                      v-model="bank.account_type"
                      v-if="field.type === 'masters-select' && field.label === 'Account Type'"
                      @input="updateBankInfo()"
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Bank Account No'"
                      v-model="bank.acccount_number"
                      @change="updateBankInfo()"
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Payout Company'"
                      v-model="bank.payout_company"
                      disabled
                    />
                  </b-col>
                </b-row>
              </div>
            </div>
            <div v-if="payoutOption == 'MPayInfo'">
              <div v-for="(field, index) in payeeInfoMPayFields" :key="index">
                <b-row class="pt-3 ml-0">
                  <b-col cols="11" md="3" lg="2" class="text-sm-left text-md-right pl-md-3 pl-0 pt-md-2">
                    <label :class="{ required: field.required }">
                      {{
                        (tLabel = $t(
                          'Dynamic.Address.' +
                            (label => label.replace(/\s/g, '-'))(
                              field.label.charAt(0).toUpperCase() + field.label.substring(1)
                            ),
                          field.label
                        ))
                      }}
                    </label>
                  </b-col>
                  <b-col cols="12" md="7" lg="5" xl="4" class="pl-0 pl-md-3">
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Card Country'"
                      v-model="mpay.card_country_name"
                      disabled
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Card Holder Name'"
                      v-model="mpay.card_holder_name"
                      @change="updateMPayInfo"
                      type="text"
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Card Number'"
                      :type="field.input_type"
                      v-model="mpay.card_number"
                      @change="updateMPayInfo"
                    />
                    <b-form-select
                      :options="formatOptions(field.options)"
                      v-model="mpay.card_expiry_date"
                      v-if="field.type === 'custom-select' && field.label === 'Card Expiry Date'"
                      @input="updateMPayInfo"
                    />
                    <b-form-select
                      :options="formatOptions(field.options)"
                      v-model="mpay.card_expiry_year"
                      :placeholder="field.placeholder"
                      v-if="field.type === 'custom-select' && field.label === 'Card Expiry Year'"
                      @input="updateMPayInfo"
                    />
                    <b-form-input
                      v-if="field.type === 'input' && field.label == 'Payout Company'"
                      v-model="mpay.payout_company"
                      disabled
                    />
                  </b-col>
                </b-row>
              </div>
            </div>
          </b-form-radio-group>
        </div>
      </b-col>
    </b-row>
    <b-row class="py-3 pr-4" v-if="0">
      <b-col class="text-left text-md-right mr-4 mr-md-0">
        <button class="btn btn-primary" @click="confirmInfo">
          {{ $t('MyAccount.EwalletSettings.Confirm') }}
        </button>
      </b-col>
    </b-row>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapState } from 'vuex'
import { UploaderMixin } from '@/app/_global/mixins'
import _ from 'lodash'
export default {
  name: 'PayeeInfo',
  mixins: [UploaderMixin],
  $_veeValidate: {
    validator: 'new',
  },
  props: {
    countryId: {
      type: Number,
      required: true,
    },
    passportNumber: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      payoutOption: 'bankInfo',
      disabledStatus: false,
      uploadCardShow: false,
      hideMpay: false,
      hideBank: false,
      hideCard: false,
      bank: {
        bank_country_name: '',
        bank_account_ic: '',
        account_holder_name: '',
        swift_code: '',
        country_bank_id: '',
        acccount_number: '',
        payout_company: '',
        account_type: '',
      },
      mpay: {
        card_country_name: '',
        card_holder_name: '',
        card_expiry_date: '',
        card_expiry_year: '',
        payout_company: '',
      },
      payeeInfoMPayFields: [],
      payeeInfoBankFields: [],
    }
  },
  async mounted() {
    await this.getPayeeInfoFormFields()
    let data = await this.getBankCardDetails
    let isEmptyObj = _.isEmpty(data)
    if (!isEmptyObj) {
      this.bank = data
    }
    this.bank.bank_country_name = this.getCountryName()
    this.bank.payout_company = this.getCountryIso()
    this.mpay.payout_company = this.getCountryIso()
    this.mpay.card_country_name = this.getCountryName()
    if (this.passport_number !== 'undefined') {
      this.bank.bank_account_ic = this.passport_number
    }
  },
  components: {},
  computed: {
    ...mapGetters('enrolment', {
      getPayeeInfoFields: 'getPayeeInfoFields',
      getBankFormSelect: 'getBankFormSelect',
      getBankCardDetails: 'getBankCardDetails',
      getmPayDetails: 'getmPayDetails',
      getBankSwiftCode: 'getBankSwiftCode',
    }),
    ...mapGetters({
      countriesOptions: 'getCountries',
      getOptions: 'getMasterDataOptionsByKey',
      isLoading: 'isLoading',
      getUploadsSettings: 'getUploadsSettings',
      getUploads: 'getUploads',
    }),
  },
  methods: {
    formatOptions(options) {
      let data = []
      for (let i = 0; i < options.length; i++) {
        data.push({
          value: options[i].value,
          text: options[i].label,
        })
      }
      return data
    },
    ...mapActions('enrolment', [
      'getDynamicRecurringInfo',
      'getDynamicPayeeInfo',
      'setBankCardDetails',
      'setMPayDetails',
    ]),
    getCountryName() {
      let name = ''
      let countries = this.countriesOptions
      for (let i = 0; i < countries.length; i++) {
        if (countries[i].value === this.country_id) {
          name = countries[i].text
        }
      }
      return name
    },
    getCountryIso() {
      let iso = ''
      let countries = this.countriesOptions
      for (let i = 0; i < countries.length; i++) {
        if (countries[i].value === this.country_id) {
          iso = countries[i].iso
        }
      }
      return iso
    },
    updateMPayInfo() {
      let payload = {
        card_country_name: this.mpay.card_country_name,
        card_holder_name: this.mpay.card_holder_name,
        card_expiry_date: this.mpay.card_expiry_date,
        card_expiry_year: this.mpay.card_expiry_year,
        payout_company: this.mpay.payout_company,
      }
      this.setMPayDetails(payload)
    },
    updateBankInfo() {
      let payload = {
        bank_country_name: this.bank.bank_country_name,
        bank_account_ic: this.bank.bank_account_ic,
        account_holder_name: this.bank.account_holder_name,
        swift_code: this.bank.swift_code,
        country_bank_id: this.bank.country_bank_id,
        acccount_number: this.bank.acccount_number,
        payout_company: this.bank.payout_company,
        account_type: this.bank.account_type,
      }
      this.setBankCardDetails(payload)
    },
    handleChangeBank(value) {
      this.bank.swift_code = this.getBankSwiftCode(value)
      this.updateBankInfo()
    },
    confirmInfo() {},
    async getPayeeInfoFormFields() {
      if (this.country_id !== undefined || this.country_id !== null) {
        const countryID = this.country_id
        let query = {
          country_id: countryID,
          types: ['member_payout_options'],
        }
        await this.getDynamicPayeeInfo(query).then(async () => {
          if (this.getPayeeInfoFields !== undefined && this.getPayeeInfoFields !== null) {
            let payeeInfo = this.getPayeeInfoFields.bank_data

            let bank_fields = []
            let mpay_fields = []
            let bank_fields_index = this.isFoundInfo(payeeInfo, 'BANK')
            let mpay_fields_index = this.isFoundInfo(payeeInfo, 'MPAY')
            if (bank_fields_index === -1) {
              this.hideBank = true
            } else {
              bank_fields = payeeInfo[bank_fields_index].fields
            }
            if (mpay_fields_index === -1) {
              this.hideMpay = true
            } else {
              mpay_fields = payeeInfo[mpay_fields_index].fields
            }
            this.payeeInfoBankFields = bank_fields
            this.payeeInfoMPayFields = mpay_fields
          }
        })
      }
    },
    isFoundInfo(list, key) {
      var found = -1
      for (let i = 0; i < list.length; i++) {
        key = key.toUpperCase()
        list[i].title = list[i].title.toUpperCase()
        if (list[i].title === key) {
          found = i
        }
      }
      return found
    },
  },
}
</script>
