import './_setup'
import * as React from 'react'
import * as ReactTestRenderer from 'react-test-renderer'
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'

// - provide default props
//
// - change validation strategy
// - validate using multiple inputs (like credit card, or confirm password)
//
// - absorb multiple inputs, even if they are flat (optional, can just pass specific props to it)

const actualValidator = (inputState: InputState) => true
const mockValidator = jest.fn(actualValidator)

const actualSerializer = (inputState: InputState) => {
  return {
    eh: 'canada',
  }
}
const mockSerializer = jest.fn(actualSerializer)

class TestPlugin extends React.Component<ObserverInputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return true
  }
  static defaultState = {
    label: 'Default State Label',
    // test just the input state
    validator: mockValidator,
    // this is important
    //    when we are using multiple inputs
    //    and we need to combine them...
    serializer: mockSerializer,
  }
  render() {
    return (
      <ObserverInput
        state={this.props.state}
        label="Test"
        data-qa="qa-test"
        required={true}
        minLength={4}
        maxLength={254}
        pattern="(.*)"
        placeholder="test..."
        type="test"
        autoComplete="test"
      />
    )
  }
}

describe('@skava/forms - plugins', () => {
  afterEach(cleanup)

  // it.skip('should - provide default props using a fn', () => {
  //   // basically do the same thing it already does in the next test
  //   // but take the current value and wrap it in a function
  //   // ...
  //   // or, test the render fn by importing it direct to test that 1 thing
  // })

  it(`should
    - provide default props
    - provide the plugins
    - render the plugin
    - pick the correct plugin
    - provide custom serialization
    - call validate
  `, () => {
    const formState = new OneFormState().setInputsList([
      {
        type: 'test',
      },
    ])

    const view = (
      <PluginsContext.Provider value={[TestPlugin]}>
        <OneObserverForm state={formState} />
      </PluginsContext.Provider>
    )

    expect(mockValidator.mock.calls.length).toEqual(0)

    const renderer = ReactTestRenderer.create(view)
    expect(renderer.toJSON()).toMatchSnapshot()

    // or `atLeast(1)`
    expect(mockValidator.mock.calls.length).toEqual(2)

    const { getByText } = render(view)

    fireEvent.click(getByText(/Continue/))

    expect(mockValidator.mock.calls.length).toEqual(2)
    // does not serialize by default now...
    // @see strategies.test
    // expect(mockSerializer.mock.calls.length).toEqual(1)
  })

  it('should be able to a render a plugin directly', () => {
    const state = new InputState()
    const view = <TestPlugin state={state} />
    const renderer = ReactTestRenderer.create(view)
    expect(renderer.toJSON()).toMatchSnapshot()
  })
})