/* eslint-disable function-paren-newline, comma-dangle */
import React from 'react'
import renderWithTheme from '../../testHelper'
import CheckboxGroupWithNSupFields from '../CheckboxGroupWithNSupFields'

describe('CheckboxGroupWithNSupFields', () => {
  it('renders a CheckboxGroupWithNSupFields', () => {
    const tree = renderWithTheme(
      <CheckboxGroupWithNSupFields
        label="Test Checkbox"
        input={{ name: 'test-checkbox-with-sup' }}
        values={[
          { label: 'One', value: 1 },
          { label: 'Two', value: 2 },
        ]}
        supplementaryFields={[
          { index: 0,
            showSupplementalValue: '1',
            render: () => (
              <div>
I am a the A supplemental field!
              </div>
            ) },
          { index: 1,
            showSupplementalValue: '2',
            render: () => (
              <div>
I am a the B supplemental field!
              </div>
            ) },
        ]}
      />
    )
    expect(tree).toMatchSnapshot()
  })

  it('renders a CheckboxGroupWithNSupFields with a value pre selected', () => {
    const tree = renderWithTheme(
      <CheckboxGroupWithNSupFields
        label="Test Checkbox"
        input={{ name: 'test-checkbox-with-sup', value: ['1'] }}
        values={[
          { label: 'One', value: 1 },
          { label: 'Two', value: 2 },
        ]}
        supplementaryFields={[
          { index: 0,
            showSupplementalValue: '1',
            render: () => (
              <div>
I am a the A supplemental field!
              </div>
            ) },
          { index: 1,
            showSupplementalValue: '2',
            render: () => (
              <div>
I am a the B supplemental field!
              </div>
            ) },
        ]}
      />
    )
    expect(tree).toMatchSnapshot()
  })

  describe('events', () => {
    it('handles onChange', () => {
      const wrapper = mount(
        <CheckboxGroupWithNSupFields
          label="Test Checkbox"
          input={{
            name: 'test-checkbox-with-sup'
          }}
          values={[
            { label: 'One', value: 1 },
            { label: 'Two', value: 2 },
          ]}
          supplementaryFields={[
            { index: 0,
              showSupplementalValue: '1',
              render: () => (
                <div>
I am a the A supplemental field!
                </div>
              ) },
            { index: 1,
              showSupplementalValue: '2',
              render: () => (
                <div>
I am a the B supplemental field!
                </div>
              ) },
          ]}
        />
      )

      const checkbox = wrapper.find('input#test-checkbox-with-sup-One')
      checkbox.simulate('change', { target: { checked: true, value: '2' } })
      expect(wrapper.state('showingSupplementals')).toEqual([
        expect.objectContaining({ index: 1, showSupplementalValue: '2' })
      ])
      checkbox.simulate('change', { target: { checked: true, value: '1' } })
      expect(wrapper.state('showingSupplementals')).toEqual([
        expect.objectContaining({ index: 0, showSupplementalValue: '1' }),
        expect.objectContaining({ index: 1, showSupplementalValue: '2' })
      ])
      checkbox.simulate('change', { target: { checked: false, value: '1' } })
      expect(wrapper.state('showingSupplementals')).toEqual([
        expect.objectContaining({ index: 1, showSupplementalValue: '2' })
      ])
    })
  })
})