<template>
  <modal-template is-header-show no-close-on-esc>
    <div slot="header" ref="title">
      <h5 class="mb-0">{{ $t('Enrolment.SelectSponsor.Title') }}</h5>
    </div>
    <div slot="body">
      <b-table
        hover
        outlined
        selectable
        class="mb-0"
        :fields="fields"
        :items="sponsorList"
        select-mode="single"
        selected-variant="primary"
        @row-selected="selectSponsor"
      >
        <template v-slot:cell(sponsor)="row">
          <h5 class="text-black mb-0">{{ row.item.old_member_id }}</h5>
          <div>{{ row.item.name }}</div>
        </template>
        <template v-slot:cell(country)="row">
          <span class="d-none d-lg-block">{{ row.item.country_name }}</span>
          <span class="d-lg-none">{{ row.item.country_code }}</span>
        </template>
        <template v-slot:cell(selected)="{ rowSelected }">
          <icon v-if="rowSelected" name="selected-icon" class="icon-size-1 mt-2" />
        </template>
      </b-table>
    </div>
    <div slot="footer">
      <b-button variant="link" @click="sponsorNotFound">{{ $t('Enrolment.CannotFindMySponsor.HelpText') }}</b-button>
      <b-button variant="primary" data-qa="confirm-btn" :disabled="selectedSponsor.length < 1" @click="updateSponsor">{{
        $t('Common.Confirm')
      }}</b-button>
    </div>
  </modal-template>
</template>

<script>
import ModalTemplate from '@/elements/common/components/modalTemplate'
import { mapActions } from 'vuex'
export default {
  name: 'SponsorSelectionModal',
  components: { ModalTemplate },
  props: {
    sponsorList: { type: Array, required: true },
  },
  data() {
    return {
      fields: [
        { key: 'sponsor', label: this.$t('Enrolment.SelectSponsor.TableHeader.Sponsor') },
        { key: 'country', label: this.$t('Enrolment.SelectSponsor.TableHeader.Country'), class: ['text-center'] },
        {
          key: 'selected',
          label: this.$t('Enrolment.SelectSponsor.TableHeader.Selected'),
          tdClass: ['text-primary'],
          class: ['text-center'],
        },
      ],
      selectedSponsor: [],
    }
  },
  methods: {
    ...mapActions('enrolment', ['resetMemberSponsor']),
    show() {
      this.$bvModal.show('modal')
    },
    hide(updateValue = false) {
      this.resetMemberSponsor(updateValue)
      this.$bvModal.hide('modal')
    },
    selectSponsor(sponsor) {
      this.selectedSponsor = sponsor
    },
    sponsorNotFound() {
      this.$swal({
        text: this.$t('Enrolment.SearchSponsor.Guideline.Text'),
        type: 'info',
      }).then(() => {
        this.$emit('resetSponsor')
        this.hide()
      })
    },
    updateSponsor() {
      this.hide(this.selectedSponsor)
    },
  },
}
</script>
