<template>
  <div>
    <div class="dashboard-panel-element rounded-0 col-md-10 eshop">
      <section class="py-2 px-3">
        <div class="row">
          <b-col xl="3" lg="4" md="8">
            <span class="font-weight-bold small text-primary"> {{ $t('Enrolment.MemberInput.Placeholder') }} </span
            ><br />
            <div class="py-1">
              <b-form-input v-model="memberInput" :placeholder="$t('Enrolment.MemberInput.Placeholder')" />
              <span v-if="showError" class="text-danger animated flash">
                {{ $t('Enrolment.MemberNotFound') }}
              </span>
            </div>
          </b-col>
          <b-col xl="4" lg="6" md="8" class="px-lg-0">
            <span class="font-weight-bold small text-primary">
              {{ $t('Enrolment.MemberName.Placeholder') }}
            </span>
            <div class="py-1">
              <b-form-input readonly v-model="memberName" />
            </div>
          </b-col>
          <b-col class="col-1">
            <span class="font-weight-bold small text-primary">
              &nbsp;
            </span>
            <div class="py-1">
              <b-btn v-if="!isLoading('getMember')" @click="searchMember" variant="primary">
                {{ memberUserID === '' ? $t('Common.Search') : $t('Enrolment.Upgrade.Button') }}
              </b-btn>
              <icon class="fa fa-4x" name="spinner" pulse v-else />
            </div>
          </b-col>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'EnrolmentUpgradeSponsor',
  computed: {
    ...mapGetters(['isLoading', 'getLoggedInUser', 'getErrorsState', 'getErrorsBreakup']),
    ...mapGetters('enrolment', {
      getUpgradeDetails: 'getUpgradeDetails',
    }),
  },
  mounted() {},
  data() {
    return {
      showError: false,
      memberInput: '',
      memberName: '',
      memberUserID: '',
    }
  },
  watch: {
    getUpgradeDetails: {
      handler() {
        if (this.getUpgradeDetails !== null && Object.keys(this.getUpgradeDetails).length > 0) {
          this.memberInput = this.getUpgradeDetails.member_id
          this.memberName = this.getUpgradeDetails.name
          this.memberUserID = this.getUpgradeDetails.user_id
        } else {
          this.showError = true
          setTimeout(async () => {
            this.showError = await false
          }, 7000)
        }
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions('enrolment', ['getMember']),
    // TODO : Mohan please do necessary adjustment to make this works properly
    async searchMember(evt) {
      evt.preventDefault()
      if (this.memberInput !== '' && this.memberUserID === '') {
        let query = {
          upgradeMember: 1,
          self: 0,
          sponsor_id: this.getLoggedInUser.id,
          exact_text: this.memberInput,
          limit: 1,
        }
        await this.getMember(query)
      }
      if (this.getUpgradeDetails !== null && Object.keys(this.getUpgradeDetails).length > 0) {
        this.goToMemberUpgradeArea()
      }
    },
    async goToMemberUpgradeArea() {
      this.$router.push({ name: 'Enrolment Area' })
    },
    reset() {
      this.memberInput = ''
      this.memberName = ''
      this.memberUserID = ''
    },
  },
}
</script>
