/**
 * @todo to test for @deprecated form state needs more work
 */
import './_setup'
import * as React from 'react'
import * as ReactTestRenderer from 'react-test-renderer'
import { render, cleanup, fireEvent } from 'react-testing-library'
import { OldInputConfigItem } from '../new-forms/OneForm/adapters/typings'
import { OneFormState, OneObserverForm } from '../new-forms/OneForm/OneForm'
// import { ObserverForm, FormState } from '../new-forms/forms'
import { PluginsContext } from '../new-forms/plugins/PluginsContext'
// === old ===
// import { FormState } from '../deprecated/forms'
// import { } from '../inputs'
// import AutoSuggestInput from '../deprecated/forms/input/plugins/Special/AutoSuggestInput'
// import TextAreaInput from '../deprecated/forms/input/plugins/Text/TextAreaInput'
import TextBoxInputPlugin from '../deprecated/forms/input/plugins/Text/TextInput'
import CheckboxInputPlugin from '../deprecated/forms/input/plugins/Special/CheckboxInput'
import CardTypeInputPlugin from '../deprecated/forms/input/plugins/Special/CardTypeInput'
import ExpiryDateInputType from '../deprecated/forms/input/plugins/Special/ExpiryDateInputType'
import LabelInputPlugin from '../deprecated/forms/input/plugins/Simple/LabelInput'
import FlatButtonInputPlugin from '../deprecated/forms/input/plugins/Button/FlatButtonInput'
import ButtonInputPlugin from '../deprecated/forms/input/plugins/Button/ButtonInput'
import SelectBoxInputPlugin from '../deprecated/forms/input/plugins/Special/SelectBoxInput'

/**
 * @todo use proxy/ until wording is updated
 */
const wording = {}

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

  it('should support old forms using the adapter', () => {
    const mockBlur = jest.fn()

    const inputList: OldInputConfigItem[] = [
      {
        identity: 'firstName',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'cardFirstName',
        labelText: `${wording.firstNameLabel}*`,
        maxLength: '100',
        wrapperClassName: 'form-item-wrapper card-first-name',
        validationType: 'name',
        errorMessageFor: 'firstName',
        dataQa: 'qa-first-name',
        autocomplete: 'first-name',
        animatePlaceholder: false,
        onBlur: mockBlur,
      },
      {
        identity: 'lastName',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'cardLastName',
        labelText: `${wording.lastNameLabel}*`,
        maxLength: '100',
        wrapperClassName: 'form-item-wrapper card-last-name',
        validationType: 'name',
        errorMessageFor: 'lastName',
        dataQa: 'qa-last-name',
        autocomplete: 'last-name',
        animatePlaceholder: false,
        onBlur: mockBlur,
      },
      {
        identity: 'cardNumber',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'cardNumber',
        labelText: `${wording.cardNumber}*`,
        maxLength: '16',
        wrapperClassName: 'form-item-wrapper card-number',
        validationType: 'creditCard',
        errorMessageFor: 'creditCard',
        dataQa: 'qa-card-number',
        autocomplete: 'card-number',
        animatePlaceholder: false,
        onBlur: mockBlur,
      },
      {
        identity: 'month',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'expirationMonth',
        labelText: `${wording.month}*`,
        maxLength: '2',
        wrapperClassName: 'form-item-wrapper card-month',
        validationType: 'month',
        errorMessageFor: 'expirationMonth',
        dataQa: 'qa-month',
        autocomplete: 'month',
        ariaLabel: wording.month,
        animatePlaceholder: false,
        onBlur: mockBlur,
      },
      {
        identity: 'year',
        type: 'text',
        value: '',
        className: 'form-inputs',
        name: 'expirationYear',
        labelText: `${wording.year}*`,
        maxLength: '4',
        wrapperClassName: 'form-item-wrapper card-expire-year',
        validationType: 'year',
        errorMessageFor: 'expirationYear',
        dataQa: 'qa-year',
        autocomplete: 'year',
        ariaLabel: wording.year,
        animatePlaceholder: false,
        onBlur: mockBlur,
      },
      {
        identity: 'defaultPaymentMethod',
        type: 'checkbox',
        label: wording.setToDefaultPaymentMethod,
        className: 'form-item-wrapper checkbox-label default-address',
        name: 'defaultPaymentMethod',
        isSelected: true,
        bgColor: '#00a0db',
        dataQa: 'qa-default-payment-method',
        ariaLabel: wording.setToDefaultPaymentMethod,
      },

      {
        identity: 'billingAddressSameasShipping',
        type: 'checkbox',
        label: wording.billingAddressSameAsShipping,
        className: 'form-item-wrapper checkbox-label default-address',
        name: 'billingAddressSameasShipping',
        isSelected: true,
        bgColor: '#00a0db',
        dataQa: 'qa-ship-billing-address',
        ariaLabel: wording.billingAddressSameAsShipping,
      },

      {
        type: 'groupElements',
        name: 'billing-address',
        className: 'billing-address-wrapper',
        validationType: 'groupElements',
        isHidden: false,
        elementList: [
          {
            identity: 'billingAddress',
            type: 'label',
            value: wording.billingAddress,
            wrapperClass: 'form-item-wrapper billing-address-heading',
            className: '',
          },
          {
            identity: 'firstName',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'addressFirstName',
            labelText: `${wording.firstNameLabel}*`,
            maxLength: '100',
            wrapperClassName: 'form-item-wrapper first-name',
            validationType: 'name',
            errorMessageFor: 'firstName',
            dataQa: 'qa-first-name',
            autocomplete: 'first-name',
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
          {
            identity: 'lastName',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'addressLastName',
            labelText: `${wording.lastNameLabel}*`,
            maxLength: '100',
            wrapperClassName: 'form-item-wrapper last-name',
            validationType: 'name',
            errorMessageFor: 'lastName',
            dataQa: 'qa-last-name',
            autocomplete: 'family-name',
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
          {
            identity: 'addressLine1',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'addressLine1',
            labelText: 'address line 1*',
            maxLength: '150',
            wrapperClassName: 'form-item-wrapper address',
            placeholderText: 'Street address, PO box, ect.',
            validationType: 'address',
            errorMessageFor: 'addressLine1',
            dataQa: 'qa-address',
            autocomplete: 'address-line1',
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
          {
            identity: 'addressLine2',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'addressLine2',
            labelText: 'address line 2 / company name',
            maxLength: '150',
            wrapperClassName: 'form-item-wrapper address',
            placeholderText: 'Apt., suite, unit, building, floor, etc.',
            validationType: 'address',
            errorMessageFor: 'addressLine2',
            dataQa: 'qa-address',
            autocomplete: 'address-line2',
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
          {
            identity: 'city',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'city',
            labelText: `${wording.cityLabel}*`,
            maxLength: '80',
            wrapperClassName: 'form-item-wrapper city',
            validationType: 'city',
            errorMessageFor: 'city',
            dataQa: 'qa-city',
            autocomplete: 'given-name',
            ariaLabel: wording.cityLabel,
            animatePlaceholder: false,
            onBlur: mockBlur,
          },

          {
            identity: 'state',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'state',
            labelText: `${wording.stateOrProvince}*`,
            maxLength: '80',
            wrapperClassName: 'form-item-wrapper state',
            validationType: 'state',
            errorMessageFor: 'state',
            dataQa: 'qa-state',
            autocomplete: 'state',
            ariaLabel: wording.stateLabel,
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
          {
            identity: 'postalCode',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'postalCode',
            labelText: `${wording.zipCode}*`,
            maxLength: '6',
            wrapperClassName: 'form-item-wrapper zip-code',
            validationType: 'zipCode',
            errorMessageFor: 'zipCode',
            dataQa: 'qa-zip-code',
            autocomplete: 'zip-code',
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
          {
            identity: 'country',
            type: 'text',
            value: '',
            className: 'form-inputs',
            name: 'country',
            labelText: `${wording.countryLabel}*`,
            maxLength: '80',
            wrapperClassName: 'form-item-wrapper country',
            validationType: 'country',
            errorMessageFor: 'country',
            dataQa: 'qa-country',
            autocomplete: 'country',
            ariaLabel: wording.countryLabel,
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
          {
            identity: 'phoneNumber',
            type: 'telephone',
            value: '',
            className: 'form-inputs',
            name: 'phoneNumber',
            labelText: `${wording.phoneNumber}*`,
            maxLength: '10',
            wrapperClassName: 'form-item-wrapper phone',
            validationType: 'telephone',
            errorMessageFor: 'phoneNumber',
            dataQa: 'qa-phone-number',
            autocomplete: 'tel',
            animatePlaceholder: false,
            onBlur: mockBlur,
          },
        ],
      },
    ]

    // @todo FormState
    const formState = new OneFormState().setInputsList(inputList)

    const view = (
      <PluginsContext.Provider
        value={[
          CheckboxInputPlugin,
          CardTypeInputPlugin,
          ExpiryDateInputType,
          SelectBoxInputPlugin,
          // easy
          FlatButtonInputPlugin,
          LabelInputPlugin,
          // not proper lists
          ButtonInputPlugin,
          TextBoxInputPlugin,
        ]}
      >
        <OneObserverForm state={formState} />
      </PluginsContext.Provider>
    )
    const renderer = ReactTestRenderer.create(view)
    expect(renderer.toJSON()).toMatchSnapshot()
  })
})