import './_setup'
import * as React from 'react'
import * as ReactTestRenderer from 'react-test-renderer'
import { PluginsContext } from '../new-forms/plugins/PluginsContext'
import { OneFormState, OneObserverForm } from '../new-forms/OneForm/OneForm'
import { TextBoxPlugin } from '../new-forms/plugins/TextPlugin'
import { FieldSetPlugin } from '../new-forms/plugins/FieldSetPlugin'
import { NamePlugin } from '../new-forms/plugins/NamePlugin'

/**
 * @todo probably could check the rendered dom and see if it rendered the plugin
 * ^ can snapshot compare diff between using the plugin & not
 */
describe('@skava/forms - fieldset', () => {
  it('fieldset works', () => {
    const inputsListForFieldSet = [
      {
        type: 'lastName',
      },
      {
        identity: 'billingAddress',
        type: 'groupElements',
        elementList: [
          {
            type: 'label',
            value: 'billing address',
          },
          {
            type: 'text',
            labelText: 'area code',
          },

          // ...postal, country, city, state, address 1 & 2
        ],
      },
      {
        identity: 'shippingAddress',
        type: 'groupElements',
        elementList: [
          {
            type: 'label',
            value: 'shipping address',
          },
          {
            type: 'firstName',
          },
          {
            type: 'lastName',
          },

          // ...postal, country, city, state, address 1 & 2
        ],
      },
    ]

    const formState = new OneFormState().setInputsList(inputsListForFieldSet)

    const view = (
      <PluginsContext.Provider
        value={[FieldSetPlugin, NamePlugin, TextBoxPlugin]}
      >
        <OneObserverForm state={formState} />
      </PluginsContext.Provider>
    )
    const renderer = ReactTestRenderer.create(view)
    expect(renderer.toJSON()).toMatchSnapshot()
  })
})