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

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
  onSubmit?: (serialized: SerializedObj) => void
}
export type FormProps = FormPropsAndRenderProps & FormPropsBase

/**
 * @todo onSubmit?
 */
export type FormRenderProps = FormPropsBase & {
  // no need for this now that we split `base`
  // renderForm: never
  // renderButtonGroup: never
  // children?: ReactNode
}