import { ReactNode, ChangeEvent, FocusEvent, MouseEvent } from 'react'

// export interface IncrementerRenderProp extends Function {
//   (props?: IncrementerProps, state?: IncrementerStateType): ReactNode
// }
// renderBox?: IncrementerRenderProp
// renderWrapper?: IncrementerRenderProp

export interface Handlers {
  onValueChange?: (state: IncrementerStateType) => void
}

export interface IncrementerProps extends Handlers {
  className?: string
  children?: ReactNode
  title?: string
  nowrap?: boolean
  step?: number
  minValue?: number
  maxValue?: number
  state?: IncrementerStateType
}

export interface IncrementerBoxProps extends Handlers {
  state: IncrementerStateType
}

export type InputChangeEvent = ChangeEvent<HTMLInputElement>
export type InputFocusEvent = FocusEvent<HTMLInputElement>
export type ClickEvent = MouseEvent<HTMLButtonElement>

export interface ChangeHandler extends Handlers {
  event: InputChangeEvent
}

export interface ClickHandler extends Handlers {
  event: ClickEvent
}

export interface IncrementerStateType {
  count: number
  shouldIncrement: boolean
  shouldDecrement: boolean

  incrementCount(props: ClickHandler): void
  decrementCount(props: ClickHandler): void
  handleChange(props: ChangeHandler): void
  handleBlur(event: InputFocusEvent): void
  update(props: IncrementerProps): void
}