<template>
  <div v-if="isMarried">
    <b-row :class="rowClasses">
      <b-col :class="labelColClasses">
        <label>
          {{ $t('Common.PersonalInfo.SpouseName') }}
        </label>
      </b-col>
      <b-col :class="inputColClasses">
        <b-form-input
          v-validate="getValidation"
          v-model="spouseDetails.spouse_name"
          :name="$t('Common.PersonalInfo.SpouseName')"
          :state="!errors.has($t('Common.PersonalInfo.SpouseName')) && null"
          :data-qa="`${dataQaPrefix}-spouse-name-input`"
        />
        <span v-show="errors.has($t('Common.PersonalInfo.SpouseName'))" class="help is-danger text-danger">
          {{ errors.first($t('Common.PersonalInfo.SpouseName')) }}
        </span>
      </b-col>
    </b-row>

    <b-row :class="rowClasses">
      <b-col :class="labelColClasses">
        <label>
          {{ $t('Common.PersonalInfo.SpouseIDPassportNo') }}
        </label>
      </b-col>
      <b-col :class="inputColClasses">
        <b-row>
          <b-col :class="icPassportTypeColClasses" class="pr-0">
            <b-form-select
              v-if="icPassportTypeOptions.length"
              v-validate="getValidation"
              :options="icPassportTypeOptions"
              v-model="spouseDetails.ic_pass_type_id"
              :name="$t('Common.PersonalInfo.SpouseIdentification.Type')"
              :state="!errors.has($t('Common.PersonalInfo.SpouseIdentification.Type')) && null"
              :data-qa="`${dataQaPrefix}-spouse-id-passport-type-select`"
            />
          </b-col>
          <b-col :class="icPassportColClasses">
            <b-form-input
              v-validate="getValidation"
              v-model="spouseDetails.ic_pass_type_number"
              :name="$t('Common.PersonalInfo.SpouseIDPassportNo')"
              :state="!errors.has($t('Common.PersonalInfo.SpouseIDPassportNo')) && null"
              :data-qa="`${dataQaPrefix}-spouse-id-passport-input`"
            />
          </b-col>
        </b-row>
        <div v-show="errors.has($t('Common.PersonalInfo.SpouseIdentification.Type'))" class="text-danger">
          {{ errors.first($t('Common.PersonalInfo.SpouseIdentification.Type')) }}
        </div>
        <div v-show="errors.has($t('Common.PersonalInfo.SpouseIDPassportNo'))" class="text-danger">
          {{ errors.first($t('Common.PersonalInfo.SpouseIDPassportNo')) }}
        </div>
      </b-col>
    </b-row>

    <b-row :class="rowClasses">
      <b-col :class="labelColClasses">
        <label>
          {{ $t('Common.PersonalInfo.SpouseDateOfBirth') }}
        </label>
      </b-col>
      <b-col :class="inputColClasses">
        <custom-date-picker
          initial-view="year"
          v-validate="getValidation"
          v-model="spouseDetails.dob"
          :name="$t('Common.PersonalInfo.SpouseDateOfBirth')"
          :disable-date-range="{ from: new Date(Date.now()) }"
          :has-error="errors.has($t('Common.PersonalInfo.SpouseDateOfBirth'))"
          :data-qa="`${dataQaPrefix}-spouse-date-of-birth-select`"
        />
        <span v-show="errors.has($t('Common.PersonalInfo.SpouseDateOfBirth'))" class="help is-danger text-danger">
          {{ errors.first($t('Common.PersonalInfo.SpouseDateOfBirth')) }}
        </span>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import CustomDatePicker from '@/elements/common/components/CustomDatePicker'
import _ from 'lodash'

export default {
  name: 'SpouseInfo',
  inject: ['$validator'],
  components: { CustomDatePicker },
  props: {
    value: { type: Object, default: () => ({}) },
    isMarried: { type: Boolean, required: true },
    validation: { type: Boolean, default: false },
    dataQaPrefix: { type: String, required: true },
    icPassportTypeOptions: { type: Array, required: true },
    rowClasses: { type: [Array, String], default: () => [] },
    labelColClasses: { type: [Array, String], default: () => [] },
    inputColClasses: { type: [Array, String], default: () => [] },
    icPassportTypeColClasses: { type: [Array, String], default: () => [] },
    icPassportColClasses: { type: [Array, String], default: () => [] },
  },
  data() {
    return {
      spouseDetails: {},
    }
  },
  watch: {
    spouseDetails: {
      handler(val) {
        if (!_.isEqual(this.value, val)) {
          this.$emit('input', val)
        }
      },
      immediate: true,
      deep: true,
    },
    isMarried: {
      handler(status) {
        if (!status) {
          // Uses nextTick to avoid resetting data while validator validate fields
          this.$nextTick(() => {
            this.spouseDetails = {
              ...this.spouseDetails,
              dob: null,
              spouse_name: '',
              ic_pass_type_id: null,
              ic_pass_type_number: '',
            }
          })
        }
      },
    },
    value: {
      handler(val) {
        this.spouseDetails = { ...val }
      },
      immediate: true,
    },
  },
  computed: {
    getValidation() {
      return this.validation ? 'required' : ''
    },
  },
}
</script>
