// - [ ] functionality
//   - finish validation strategies
//   - check with @anitha to confirm all
import './_setup'
import * as React from 'react'
import { render, cleanup, fireEvent } from 'react-testing-library'
import { ValidationStrategyContext } from '../new-forms/strategies'
import {
  OnSubmitStrategyArgs,
  OnChangeStrategyArgs,
  OnFocusStrategyArgs,
  OnBlurStrategyArgs,
} from '../new-forms/strategies'
import { OneFormState, OneObserverForm } from '../new-forms/OneForm/OneForm'
import { PluginsContext } from '../new-forms/plugins/PluginsContext'
import { TextBoxPlugin } from '../new-forms/plugins/TextPlugin'
import { SerializedObj } from '../new-forms/typings'

function toTest() {
  const inputsList = [
    {
      propertyName: 'eh',
      value: 'canada',
      type: 'text',
    },
  ]
  const formState = new OneFormState().setInputsList(inputsList)
  class TestValidationStrategy {
    onSubmit = (args: OnSubmitStrategyArgs) => {
      // keeping to 2 expects per event handler
      // expect(Object.keys(args).length).toEqual(2)
      const serialized = args.state.toJSON() as SerializedObj
      expect(serialized.eh).toEqual('canada')
      expect(Object.keys(serialized).length).toEqual(1)
    }
    onChange = (args: OnChangeStrategyArgs) => {
      expect(Object.keys(args).length).toEqual(2)
      expect(args.state.value).toEqual('moose')
    }
    onFocus = (args: OnFocusStrategyArgs) => {
      expect(Object.keys(args).length).toEqual(2)
      expect(args.state.isActive).toEqual(true)
    }
    onBlur = (args: OnBlurStrategyArgs) => {
      expect(Object.keys(args).length).toEqual(2)
      expect(args.state.isActive).toEqual(false)
    }
  }
  const strategy = new TestValidationStrategy()
  const view = (
    <ValidationStrategyContext.Provider value={strategy}>
      <PluginsContext.Provider value={[TextBoxPlugin]}>
        <OneObserverForm state={formState} />
      </PluginsContext.Provider>
    </ValidationStrategyContext.Provider>
  )
  return {
    inputsList,
    formState,
    strategy,
    view,
  }
}

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

  it('should work for `onBlur`', () => {
    const { view } = toTest()
    const { getByText } = render(view)
    fireEvent.click(getByText(/Continue/))
  })

  describe('type=text', () => {
    it('should work for `onChange` on text', () => {
      // focus(2)? + change(2)
      expect.assertions(2)
      const { view } = toTest()
      const { container } = render(view)
      const found = container.querySelector('input')!
      fireEvent.change(found, { target: { value: 'moose' } })
    })
    it('should work for `onFocus`', () => {
      // focus(2)
      expect.assertions(2)
      const { view } = toTest()
      const { container } = render(view)
      const found = container.querySelector('input')!
      fireEvent.focus(found)
    })
    it('should work for `onBlur`', () => {
      // focus(2) + blur(2)
      expect.assertions(4)
      const { view } = toTest()
      const { container } = render(view)
      const found = container.querySelector('input')!
      fireEvent.focus(found)
      fireEvent.blur(found)
    })
  })

  describe('type=select|checkbox', () => {
    // including dropdown/select
    it.skip('should work for `onChange` on select & checkbox', () => {
      // @todo
    })
  })

  it('should work for `onSubmit`', () => {
    // onSubmit(2)
    expect.assertions(2)
    const { view } = toTest()
    const { getByText } = render(view)
    fireEvent.click(getByText(/Continue/))
  })
})