<template>
  <div class="row px-0 py-2">
    <b-col
      cols="12"
      class="single-validation-holder"
      v-if="getIcPassportNumber !== ''"
      :class="isLoading('userOnDemandVerification') ? 'init' : getUserOnDemandVerificationPass ? 'pass' : 'fail'"
    >
      <div class="section-title">
        <span v-if="isLoading('userOnDemandVerification')">
          <icon name="spinner" pulse class="section-progress icon-size-1" />
        </span>
        <span v-if="isLoading('userOnDemandVerification')">
          {{ $t('CustomValidator.IcPassportUniqueChecking.Title', { field: $t('Enrolment.Identification.Label') }) }}
        </span>
        <span v-else class="d-flex align-items-baseline">
          <span class="section-count">
            {{ count }}
          </span>
          <span v-if="getUserOnDemandVerificationPass">
            {{
              $t('CustomValidator.IcPassportUniqueCheckingPass.Title', { field: $t('Enrolment.Identification.Label') })
            }}
            <icon name="check" class="icon-size-1" />
          </span>
          <span v-if="getUserOnDemandVerificationPass !== null && !getUserOnDemandVerificationPass">
            {{
              $t('CustomValidator.IcPassportUniqueValidation.Error', { field: $t('Enrolment.Identification.Label') })
            }}
            <!--<icon-->
            <!--name="times"-->
            <!--class="icon-size-1"-->
            <!--/>-->
          </span>
          <span v-if="getIcPassportNumber === '' || getUserOnDemandVerificationPass === null">
            {{ $t('CustomValidator.IcPassportUniqueInitial.Title', { field: $t('Enrolment.Identification.Label') }) }}
          </span>
        </span>
      </div>
    </b-col>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import _ from 'lodash'

export default {
  name: 'IcPassportUniqueValidation',
  watch: {
    getIcPassportNumber: {
      handler() {
        this.check()
      },
    },
    getAutoValidationActivateStatus: {
      handler() {
        this.check()
      },
    },
    conditions(to, from) {
      if (!_.isEqual(to, from)) {
        this.check()
      }
    },
  },
  data: () => ({
    init: true,
  }),
  props: {
    memberIdPassportNumber: {
      type: String,
      required: true,
    },
    count: {
      type: String,
      default: '1',
    },
    conditions: {
      type: Array,
      required: true,
    },
  },
  computed: {
    ...mapGetters({
      isLoading: 'isLoading',
      getIcPassportNumber: 'getIcPassportNumber',
      getUserOnDemandVerificationPass: 'getUserOnDemandVerificationPass',
      getAutoValidationActivateStatus: 'getAutoValidationActivateStatus',
    }),
  },
  methods: {
    ...mapActions(['getUserOnDemandVerification']),
    check() {
      this.getUserOnDemandVerification({
        table: 'members',
        field: 'ic_passport_number',
        value: this.memberIdPassportNumber,
        conditions: this.conditions,
      })
    },
  },
}
</script>
