/**
 * @todo this does not import
 */
import './_setup'
import * as React from 'react'
import { observe } from 'xmobx/mobx'
import { mount } from 'enzyme'
import { ObserverInput as TextInput } from '../new-forms/inputs/ObserverInput'
import { InputState } from '../new-forms/inputs/InputState'

describe('@skava/forms - enzyme', () => {
  it('TextInput rendering and change in value reflects in state change', () => {
    const state = new InputState()
    const Wrapper = mount(<TextInput state={state} />)
    const Input = Wrapper.find('input')

    Input.simulate('change', { target: { value: 'FOo*' } })
    expect(state.value).toBe('FOo*')
  })

  it('Error Message is rendered onblur', () => {
    expect.assertions(6)

    const state = new InputState()
    state.setValidator((value: any) =>
      state.value === 'eh' ? true : 'test error'
    )
    state.setValue('eh')

    // 1
    expect(state.value).toBe('eh')

    const handleFocus = () => {
      state.setValue('focused')
    }
    observe(state, 'isActive', () => {
      handleFocus()
    })
    // onFocus={handleFocus}
    const Wrapper = mount(<TextInput state={state} />)
    const Input = Wrapper.find('input')

    const errors = Wrapper.find('[role="alert"]')

    // 3
    expect(errors.length).toBe(1)
    // 4
    expect(errors.at(0).text()).toBe('')

    Input.simulate('focus')
    // 5
    expect(state.value).toBe('focused')
    // 6
    expect(
      Wrapper.find('[role="alert"]')
        .at(0)
        .text()
    ).toBe('test error')
    Input.simulate('blur')

    // 7
    expect(
      Wrapper.find('[role="alert"]')
        .at(0)
        .text()
    ).toBe('test error')
  })

  it('Error should not be rendered when input has some value on blur', () => {
    const state = new InputState()
    state.setValidator((value: any) => true)
    state.setValue('eh')
    expect(state.value).toBe('eh')
    const handleFocus = () => {
      state.setValue('focused')
    }
    observe(state, 'isActive', () => {
      handleFocus()
    })
    const Wrapper = mount(<TextInput state={state} />)
    const Input = Wrapper.find('input')

    expect(
      Wrapper.find('[role="alert"]')
        .at(0)
        .text()
    ).toBe('')
    Input.simulate('focus')
    expect(state.value).toBe('focused')
    Input.simulate('change', { target: { value: 'FOo*' } })
    expect(state.value).toBe('FOo*')

    expect(
      Wrapper.find('[role="alert"]')
        .at(0)
        .text()
    ).toBe('')
    Input.simulate('blur')
    expect(
      Wrapper.find('[role="alert"]')
        .at(0)
        .text()
    ).toBe('')
  })

  it.skip('TextInput rendering and change in value reflects in state change', () => {
    // const Wrapper = mount(<TextAreaInput />)
    // const Wrapper = TestRenderer.create(<TextAreaInput />)
    // const Input = Wrapper.find('textarea')
    // Input.simulate('change', { target: { value: 'FOo*' } })
    // expect(Wrapper.state('value')).toBe('FOo*')
    // console.log('Wrapper', Wrapper.children())
    // console.log('Wrapper', Wrapper.debug())
    // const Input = Wrapper.find('textarea')
    // Input.simulate('keydown', { key: 'z', keyCode: 90, which: 90 })
    // Input.simulate('change', { target: { value: 'FOo*' } })
    // console.log('**************', Input.value())
    // expect(Wrapper.state('value')).toBe('FOo*')
  })
})