<template>
  <div class="row px-0 py-2">
    <b-col
      cols="12"
      class="single-validation-holder"
      v-if="memberIdPassportNumber !== ''"
      :class="
        isLoading('classicCrossSponsoringVerification')
          ? 'init'
          : getExternalApiClassicCrossSponsoringVerificationPass
          ? getExternalApiClassicCrossSponsoringVerificationHasApiError
            ? 'warning'
            : 'pass'
          : 'fail'
      "
    >
      <div class="section-title">
        <span v-if="isLoading('classicCrossSponsoringVerification')">
          <icon name="spinner" pulse class="section-progress icon-size-1" />
        </span>
        <span v-if="isLoading('classicCrossSponsoringVerification')">
          {{ $t('CustomValidator.IcPassportCrossSponsorChecking.Title') }}
        </span>
        <div v-else class="d-flex align-items-baseline">
          <span class="section-count">
            {{ count }}
          </span>
          <span
            v-if="
              getExternalApiClassicCrossSponsoringVerificationPass &&
                !getExternalApiClassicCrossSponsoringVerificationHasApiError
            "
          >
            {{ $t('CustomValidator.IcPassportCrossSponsorCheckingPass.Title') }}
            <icon name="check" class="icon-size-1" />
          </span>
          <span v-if="getExternalApiClassicCrossSponsoringVerificationHasApiError">
            {{ $t('CustomValidator.IcPassportCrossSponsorValidationOffline.Title') }}
            <icon name="exclamation" class="icon-size-1" />
          </span>
          <span
            v-if="
              getExternalApiClassicCrossSponsoringVerificationPass !== null &&
                !getExternalApiClassicCrossSponsoringVerificationPass
            "
          >
            {{ $t('CustomValidator.IcPassportCrossSponsoringValidation.Error', { memberID: sponsorMemberIbo }) }}
          </span>
          <span v-if="memberIdPassportNumber === '' || getExternalApiClassicCrossSponsoringVerificationPass === null">
            {{ $t('CustomValidator.IcPassportCrossSponsorInitial.Title') }}
          </span>
        </div>
      </div>
    </b-col>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  name: 'IcPassportCrossSponsoringValidation',
  props: {
    memberIdPassportNumber: {
      type: String,
      required: true,
    },
    sponsorId: {
      type: [String, Number],
      required: true,
    },
    sponsorMemberIbo: {
      type: [String, Number],
      default: 'Unknown',
    },
    count: {
      type: String,
      default: '2',
    },
  },
  watch: {
    getIcPassportNumber: {
      handler() {
        this.check()
      },
    },
    getAutoValidationActivateStatus: {
      handler() {
        this.check()
      },
    },
  },
  data: () => ({
    init: true,
  }),
  computed: {
    ...mapGetters({
      isLoading: 'isLoading',
      getIcPassportNumber: 'getIcPassportNumber',
      getExternalApiClassicCrossSponsoringVerificationPass: 'getExternalApiClassicCrossSponsoringVerificationPass',
      getAutoValidationActivateStatus: 'getAutoValidationActivateStatus',
      getExternalApiClassicCrossSponsoringVerificationHasApiError:
        'getExternalApiClassicCrossSponsoringVerificationHasApiError',
    }),
  },
  methods: {
    ...mapActions(['checkMemberCrossSponsoringStatus']),
    ...mapMutations({
      resetClassicCrossSponsoringVerification: 'RESET_CLASSIC_CROSS_SPONSORING_VERIFICATION',
    }),
    check() {
      if (this.memberIdPassportNumber !== '' && this.sponsorId !== '') {
        this.checkMemberCrossSponsoringStatus({
          applicantIcPassportNumber: this.memberIdPassportNumber,
          sponsorId: this.sponsorId,
        })
      } else {
        this.resetClassicCrossSponsoringVerification()
      }
    },
  },
}
</script>
