import { ReactNode, ReactElement, HTMLProps, FormEvent } from 'react'
// @note - careful for circular
import { InputState } from '../inputs/InputState'
import { FormState } from './FormState'
import { OnSubmitStrategyArgs } from '../strategies/typings'
export { OnSubmitStrategyArgs } from '../strategies/typings'

export type RenderedInput = ReactElement<HTMLInputElement>
export type RenderedForm = ReactElement<HTMLFormElement>
export interface FormPropsAndRenderProps {
  renderForm: (props: FormRenderProps) => RenderedInput
  renderButtonGroup: (props: FormRenderProps) => ReactNode
  renderInput: (props: InputState) => RenderedForm
}
export type HTMLFormProps = HTMLProps<HTMLFormElement>

export type FormPropsBase = HTMLFormProps & {
  state: FormState
}
export type FormProps = FormPropsAndRenderProps &
  FormPropsBase & {
    className?: string
    onSubmit?: (args: OnSubmitStrategyArgs) => void
  }

export type FormGetPredicate = (inputState: InputState) => boolean

export type FormRenderProps = FormPropsBase & {
  // this goes to the dom
  onSubmit?: (args: FormEvent<any>) => void

  // no need for this now that we split `base`
  // renderForm: never
  // renderButtonGroup: never
  // children?: ReactNode
}