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

describe('RadioGroupWithNSupFields', () => {
  it('renders a RadioGroupWithNSupFields', () => {
    const tree = renderWithTheme(
      <RadioGroupWithNSupFields
        label="Test Radio"
        input={{ name: 'test-radio-with-sup' }}
        values={[
          { label: 'One', value: 1, id: 'A' },
          { label: 'Two', value: 2, id: 'B' },
        ]}
        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(
        <RadioGroupWithNSupFields
          label="Test Radio"
          input={{
            name: 'test-radio-with-sup'
          }}
          values={[
            { label: 'One', value: 1, id: 'A' },
            { label: 'Two', value: 2, id: 'B' },
          ]}
          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 radio = wrapper.find('input#test-radio-with-sup-One')
      radio.simulate('change', { target: { checked: true, value: '1' } })
      expect(wrapper.state('showingSupplementals')).toEqual([
        expect.objectContaining({ index: 0, showSupplementalValue: '1' })
      ])
      radio.simulate('change', { target: { checked: true, value: '2' } })
      expect(wrapper.state('showingSupplementals')).toEqual([
        expect.objectContaining({ index: 1, showSupplementalValue: '2' })
      ])
    })
  })
})