import { JSX, Component, FocusEvent, ChangeEvent } from 'react'
import { InputState, InputValue } from 'src/forms'
import { SyntheticEvent } from 'react'

// @todo these are typed in forms/
export interface InputEventHandler extends Function {
  (event: Event, instance?: any): void
}

export interface TextBoxComponent extends Component<TextBoxProps, TextBoxState> {
  blurMiddleware(event: FocusEvent<HTMLInputElement>): void
  focusMiddleware(event: FocusEvent<HTMLInputElement>): void

  handleFocus(event: FocusEvent<HTMLInputElement>): void
  handleBlur(event: FocusEvent<HTMLInputElement>): void

  handleChange(event: ChangeEvent<HTMLInputElement>): void
  render(): JSX.Element
}

export interface TextBoxState extends InputState {
  //
}

export interface AccessibleTextBoxProps {
  'aria-invalid'?: string | boolean
  className?: string
  required?: boolean
}

export interface TextBoxProps {
  state?: TextBoxState
  value?: InputValue
  nowrap?: boolean

  autocomplete?: boolean
  type?: string
  name?: string

  animatePlaceholder?: boolean
  placeholderText?: string
  // - THIS IS NOT THE SAME AS PLACEHOLDER - FLOATING LABEL...
  placeholder?: string

  // @note @deprecated
  // you can use the pass through component and remove this
  // customAttributes: object

  isFocused?: boolean
  isLabelOnTop?: boolean

  // classes
  className?: string

  // @deprecated
  wrapperClassName?: string

  // isValid | isInvalid
  hasValidationError?: boolean
  isValidInput?: boolean

  // validation type
  validationType?: string

  // value is often a string -.-
  // name passed in is not consistent
  // maxlength: Number,
  maxLength?: number
  minLength?: number

  // to subscribe to changing values
  onValueChange?: InputEventHandler

  /**
   * @todo should alias validationFunction & onBlur
   */
  onBlur?: InputEventHandler
  validationMethod?: InputEventHandler

  // to disable the input
  isDisabled?: string

  onFormValidation?: InputEventHandler
  onFocus?: InputEventHandler

  /**
   * @note @invalid name - no acronynms - onFocus
   *     customCbk  means nothing
   */

  renderPlaceholder?: TextBoxRenderProps
  renderError?: TextBoxRenderProps
  labelText?: string
}

interface TextBoxRenderProps {
  (props: TextBoxProps, state: TextBoxState): JSX.Element | any
}

/**
 * @see https://stackoverflow.com/questions/42081549/typescript-react-event-types
 * @see https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript
 * @see https://github.com/fdecampredon/react-typescript/blob/master/declarations/react.d.ts
 * @see https://reactjs.org/docs/events.html
 */
export interface ChangeEvent<T> extends SyntheticEvent<T> {
  target: EventTarget & {
    value: string | number | boolean
    checked: string | boolean
  }
}

export type InputChangeEvent = ChangeEvent<HTMLInputElement>