import { createAppLocalVue } from '@/../tests/utils' // should be the first to implement default mocks
import { mount, shallowMount } from '@vue/test-utils'
import SpouseInfo from '@/app/_global/components/blocks/SpouseInfo'
import CustomDatePicker from '@/elements/common/components/CustomDatePicker'

const localVue = createAppLocalVue()

describe(' Global - Component -Block - SpouseInfo', () => {
  it('Should render Spouse Name and Spouse ID Passport No and spouse Date Of Birth fields when is married', async () => {
    let icPassportTypeOptions = []
    const wrapper = shallowMount(SpouseInfo, {
      localVue,
      propsData: {
        isMarried: true,
        dataQaPrefix: 'jest-testing',
        rowClasses: 'mock-row-class',
        labelColClasses: 'mock-label-col-class',
        inputColClasses: 'mock-input-col-class',
        icPassportColClasses: 'mock-passport-col-class',
        icPassportTypeOptions: icPassportTypeOptions,
        icPassportTypeColClasses: 'mock-passport-type-col-class',
      },
    })
    expect(wrapper.element).toMatchSnapshot()
    expect(wrapper.find('.mock-row-class').exists()).toBeTruthy()
    expect(wrapper.find('.mock-label-col-class').exists()).toBeTruthy()
    expect(wrapper.find('.mock-input-col-class').exists()).toBeTruthy()
    expect(wrapper.find('.mock-passport-col-class').exists()).toBeTruthy()
    expect(wrapper.find('.mock-passport-type-col-class').exists()).toBeTruthy()
    expect(wrapper.find('[data-qa="jest-testing-spouse-name-input"]').exists()).toBeTruthy()
    expect(wrapper.find('[data-qa="jest-testing-spouse-id-passport-input"]').exists()).toBeTruthy()
    expect(wrapper.find('[data-qa="jest-testing-spouse-date-of-birth-select"]').exists()).toBeTruthy()
    expect(wrapper.find('[data-qa="jest-testing-spouse-id-passport-type-select"]').exists()).toBeFalsy()

    icPassportTypeOptions.push({ text: 'mock', value: 1 })
    await wrapper.vm.$nextTick()
    expect(wrapper.find('[data-qa="jest-testing-spouse-id-passport-type-select"]').exists()).toBeTruthy()
  })

  it('Should not render Spouse Name and Spouse ID Passport No and spouse Date Of Birth fields when not married', async () => {
    const wrapper = shallowMount(SpouseInfo, {
      localVue,
      propsData: {
        isMarried: false,
        dataQaPrefix: 'jest-testing',
        icPassportTypeOptions: [{ text: 'mock', value: 1 }],
      },
    })
    expect(wrapper.element).toMatchSnapshot()
    expect(wrapper.find('[data-qa="jest-testing-spouse-name-input"]').exists()).toBeFalsy()
    expect(wrapper.find('[data-qa="jest-testing-spouse-id-passport-input"]').exists()).toBeFalsy()
    expect(wrapper.find('[data-qa="jest-testing-spouse-date-of-birth-select"]').exists()).toBeFalsy()
  })

  it('Should emit reset spouse details when not married status set', async () => {
    const wrapper = shallowMount(SpouseInfo, {
      localVue,
      propsData: {
        isMarried: true,
        dataQaPrefix: 'jest-testing',
        icPassportTypeOptions: [{ text: 'mock', value: 1 }],
      },
    })
    await wrapper.setProps({ isMarried: false })
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('input')).toBeTruthy()
    expect(wrapper.emitted('input')[0][0]['dob']).toBe(null)
    expect(wrapper.emitted('input')[0][0]['spouse_name']).toBe('')
    expect(wrapper.emitted('input')[0][0]['ic_pass_type_number']).toBe('')
  })

  it('Should emit spouse details when data updated', async () => {
    const wrapper = mount(SpouseInfo, {
      localVue,
      propsData: {
        isMarried: true,
        dataQaPrefix: 'jest-testing',
        icPassportTypeOptions: [{ text: 'mock', value: 1 }],
      },
      stubs: {
        'custom-date-picker': CustomDatePicker,
      },
    })

    let spouseNameElm = wrapper.find('[data-qa="jest-testing-spouse-name-input"]')
    let spousePassportIdElm = wrapper.find('[data-qa="jest-testing-spouse-id-passport-input"]')
    let spouseDobElm = wrapper.find('[data-qa="jest-testing-spouse-date-of-birth-select"]')

    spouseNameElm.element.value = 'mock-name'
    spousePassportIdElm.element.value = 'mock-passport-id'
    spouseDobElm.element.value = 'Thu Jul 25 2019 12:09:22 GMT+0800 (Malaysia Time)'

    spouseNameElm.trigger('input')
    spousePassportIdElm.trigger('input')
    spouseDobElm.trigger('input')

    expect(spouseNameElm.element.value).toBe('mock-name')
    expect(spousePassportIdElm.element.value).toBe('mock-passport-id')
    expect(spouseDobElm.element.value).toBe('Thu Jul 25 2019 12:09:22 GMT+0800 (Malaysia Time)')

    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('input')).toBeTruthy()

    // todo: Missing test coverage for spouse DOB element value
  })
})
