// - [ ] render
//     - test passThrough props going to the wrapper & input (they go to the right place)
//     - test render using custom plugin
//     - test renderWrap
//     - test renderInput
//     - test renderForm
//     - test FormContext consumer
//     - test InputContext consumer
//     - test rendered styles on validations true & false
import './_setup'
import * as React from 'react'
import { render, cleanup, fireEvent } from 'react-testing-library'
import { OneFormState, OneObserverForm } from '../new-forms/OneForm/OneForm'
import { ObserverInputProps } from '../new-forms/inputs/typings'
import { InputState } from '../new-forms/inputs/InputState'
import { ObserverInput } from '../new-forms/inputs/ObserverInput'
import { PluginsContext } from '../new-forms/plugins/PluginsContext'
import { InputContext } from '../new-forms/inputs/InputContext'
import { FormContext } from '../new-forms/forms/FormContext'

/**
 * @todo can use renderProps in the inputsList
 */
class TestPlugin extends React.Component<ObserverInputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return true
  }
  render() {
    return (
      <ObserverInput
        label="Test"
        type="test"
        state={this.props.state}
        renderInput={props => (
          <FormContext.Consumer>
            {context => {
              expect(typeof context).toEqual('object')
              return <input {...props} data-qa="qa-test-input" type="test" />
            }}
          </FormContext.Consumer>
        )}
        renderWrap={props => (
          <InputContext.Consumer>
            {context => {
              expect(context.type).toEqual('test')
              return <div {...props} data-qa="qa-test-wrap" />
            }}
          </InputContext.Consumer>
        )}
      />
    )
  }
}

describe('@skava/forms - render', () => {
  afterEach(cleanup)
  it('should provide contexts from forms + inputs', () => {
    expect.assertions(3)

    const formState = new OneFormState().setInputsList([
      {
        type: 'test',

        // @todo !!! NEED TO TEST THIS
        // renderInput,
        // renderWrap,
      },
    ])
    const view = (
      <PluginsContext.Provider value={[TestPlugin]}>
        <OneObserverForm state={formState} />
      </PluginsContext.Provider>
    )
    const { container } = render(view)
    const inputRenderer = container.querySelector('form')!
    const html = inputRenderer.outerHTML
    fireEvent.click(inputRenderer)
    expect(html).toMatchSnapshot()
  })
})