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

describe('RadioGroupWithSupplementaryField', () => {
  it('renders a RadioGroupWithSupplementaryField', () => {
    const tree = renderWithTheme(
      <RadioGroupWithSupplementaryField
        label="Test Radio"
        input={{ name: 'test-radio-with-sup' }}
        values={[
          { label: 'One', value: 1 },
          { label: 'Two', value: 2 },
        ]}
        render={() => (
          <div>
I am a supplemental field!
          </div>
        )}
        showSupplementalValue="2"
      />
    )
    expect(tree).toMatchSnapshot()
  })

  describe('events', () => {
    it('handles onChange', () => {
      const wrapper = mount(
        <RadioGroupWithSupplementaryField
          label="Test Radio"
          input={{
            name: 'test-radio-with-sup'
          }}
          values={[
            { label: 'One', value: 1 },
            { label: 'Two', value: 2 },
          ]}
          render={() => (
            <div>
I am a supplemental field!
            </div>
          )}
          showSupplementalValue="2"
        />
      )

      const radio = wrapper.find('input#test-radio-with-sup-Two')
      radio.simulate('change', { target: { checked: true, value: '2' } })
      expect(wrapper.state('showSupplemental')).toEqual(true)
      radio.simulate('change', { target: { checked: true, value: '1' } })
      expect(wrapper.state('showSupplemental')).toEqual(false)
    })
  })

  describe('RadioGroupWithSupplementaryField Multiple Values', () => {
    it('renders a RadioGroupWithSupplementaryField with Multiple Values', () => {
      const wrapper = mount(
        <RadioGroupWithSupplementaryField
          label="Test Radio"
          input={{ name: 'test-radio-with-sup' }}
          values={[
            { label: 'One', value: 1 },
            { label: 'Two', value: 2 },
            { label: 'Three', value: 3 },
          ]}
          render={() => (
            <div>
  I am a supplemental field!
            </div>
          )}
          showSupplementalValue={['1', '2']}
        />
      )
      const radio = wrapper.find('input#test-radio-with-sup-Two')
      radio.simulate('change', { target: { checked: true, value: '2' } })
      expect(wrapper.state('showSupplemental')).toEqual(true)
      radio.simulate('change', { target: { checked: true, value: '3' } })
      expect(wrapper.state('showSupplemental')).toEqual(false)
      radio.simulate('change', { target: { checked: true, value: '1' } })
      expect(wrapper.state('showSupplemental')).toEqual(true)
    })
  })

  describe('RadioGroupWithSupplementaryField Nothing Selected for String', () => {
    it('tests a RadioGroupWithSupplementaryField with nothing selected for string', () => {
      const wrapper = mount(
        <RadioGroupWithSupplementaryField
          label="Test Radio"
          input={{ name: 'test-radio-with-sup' }}
          values={[
            { label: 'One', value: 'one' },
            { label: 'Two', value: 'two' },
          ]}
          render={() => (
            <div>
  I am a supplemental field!
            </div>
          )}
          showSupplementalValue="one"
        />
      )
      expect(wrapper.state('showSupplemental')).toEqual(false)
    })
  })

  describe('RadioGroupWithSupplementaryField Nothing Selected for Array', () => {
    it('tests a RadioGroupWithSupplementaryField with nothing selected for array', () => {
      const wrapper = mount(
        <RadioGroupWithSupplementaryField
          label="Test Radio"
          input={{ name: 'test-radio-with-sup' }}
          values={[
            { label: 'One', value: 'one' },
            { label: 'Two', value: 'two' },
          ]}
          render={() => (
            <div>
  I am a supplemental field!
            </div>
          )}
          showSupplementalValue={['one', 'two']}
        />
      )
      expect(wrapper.state('showSupplemental')).toEqual(false)
    })
  })
})