import {
  Component,
  ComponentElement,
  ComponentType,
  createElement as r,
  Fragment,
  ReactElement,
  ReactPortal,
  SFCElement,
} from 'react'
import { FieldRenderProps } from 'react-final-form'
import SequentialId, { ISequentialIdProps } from 'react-sequential-id'

export interface InputComponents {
  error?: ComponentType<any>
  input?: ComponentType<any>
}

export interface ComponentsProp {
  components?: InputComponents
}

export type InputProps = ComponentsProp & FieldRenderProps

export {
  Component,
  ComponentElement,
  ISequentialIdProps,
  ReactElement,
  ReactPortal,
  SFCElement,
}

export default function InputFeedback({
  components: c = {},
  input,
  meta = { error: null, touched: false },
  ...props
}: InputProps) {
  const components = {
    error: 'span',
    input: 'input',
    ...c,
  }
  const { error, touched } = meta
  const showError = touched && !!error
  return r(SequentialId, {}, (errorId: string) =>
    r(
      Fragment,
      {},
      r(components.input, {
        'aria-describedby': showError ? errorId : null,
        'aria-invalid': showError,
        ...props,
        ...input,
      }),
      showError && r(components.error, { id: errorId }, error),
    ),
  )
}

import {
  Component,
  ComponentElement,
  createElement as r,
  Fragment,
  ReactElement,
  ReactPortal,
  SFCElement,
} from 'react'
import { FieldRenderProps } from 'react-final-form'
import SequentialId, { ISequentialIdProps } from 'react-sequential-id'

export type InputProps = FieldRenderProps

export {
  Component,
  ComponentElement,
  ISequentialIdProps,
  ReactElement,
  ReactPortal,
  SFCElement,
}

export default function InputFeedback({
  input,
  meta = { error: null, touched: false },
  ...props
}: InputProps) {
  const { error, touched } = meta
  const showError = touched && !!error
  return r(SequentialId, {}, (errorId: string) =>
    r(
      Fragment,
      {},
      r('input', {
        'aria-describedby': showError ? errorId : null,
        'aria-invalid': showError,
        ...props,
        ...input,
      }),
      showError && r('span', { id: errorId }, error),
    ),
  )
}

Remove support for custom components
Remove support for custom components
