import React from 'react'
import {
  ComponentClass,
  Component,
  ClassicComponent,
  ComponentElement,
} from 'react'
import { Serializable } from '@skava/typings'
import { FormStateType } from '../form/typings'
import {
  HTMLInputElementReact,
  InputValue,
  InputType as ObserverInputType,
} from './typings.inputs'

export * from './typings.inputs'

export type InputStringType =
  | 'text'
  | 'radio'
  | 'radioGroup'
  | 'groupedElements'
  | 'textarea'
  | 'checkbox'
  | 'email'
  | 'telephone'
  | 'password'
  | 'confirmPassword'
  //
  | 'button'
  | 'flatButton'
  //
  | 'label'
  | 'googleAutoSugggest'
  | 'dropdown'
  | string

// split the methods out because have to change interface to class to extend
export interface InputStateMethodsType<Props = any> {
  // Function
  updateFocused(event: Event, input?: InputStateType | Component<Props>): void

  // note the overload
  validateInput(input: InputStateType): void
  validateInput(event: Event, input: InputStateType): void

  setValue(value?: string | boolean): InputStateType
  getValue(identifierOrName: string): any
  setInputReference(input: HTMLInputElement): void
  setProps(props: React.Attributes): void
  toJSON(): Serializable
  toString(): string
}

// @note - the default value is first for things like booleans
export class InputStateType<Props = any> {
  dynamicState?: {
    // there are lots of values that end up here
    [key: string]: any
  }

  // priority
  // this is actualy a Component instance...
  input: HTMLInputElementReact | ObserverInputType
  value: InputValue
  props: Props

  // @todo see commonStates for more helpful common props

  // for finding in a list
  index: number

  // states
  isFocused: false | true

  // !!! @todo why 3
  // validation
  isValid: true | false
  isValidInput: true | false
  hasValidationError?: false | true

  errorMessage?: string
  // @deprecated...
  errorMessageFor?: string

  // @deprecated
  elementList?: Array<InputStateType>

  /**
   * @description for checkboxes & radios
   */
  isSelected?: boolean
  isRequired?: boolean

  isEnabled?: boolean

  // form
  // @alias identifier
  // @default uuid
  identity?: 'name' | string
  identifier?: string
  name?: '' | string
  // protected _identifier?: string
  _identifier?: string

  /**
   * @todo Array
   * @description commaSeparatedArray or array (currently only array)
   */
  validationType?: string | Array<string | Function>

  type?: InputStringType

  /**
   * added
   */
  isVisible?: boolean
  isHidden?: boolean
}

export type InputStateComposedType = InputStateType &
  InputStateMethodsType &
  ObserverInputProps

export interface ObserverInputComponent<
  Props extends ObserverInputProps = ObserverInputProps
> extends ComponentClass<Props> {
  state: InputStateType
  // meh
  // setState(state): any
  // props:
}

export interface InputTypeHandlers {
  // ChangeEventHandler
  handleChange(event: MouseEvent): void
  handleFocus(event: MouseEvent): void
  handleBlur(event: MouseEvent): void
}

export type ReactInput = ComponentElement<
  ObserverInputProps,
  ClassicComponent<ObserverInputProps>
>

export interface InputTypeActions {
  toggleCheckBox(): ReactInput
  updateDropDownState(): ReactInput
}
// anyway, we can plug into any of these
// see how (almost) all of these are able to be done by a prop ;-)
export interface RenderPropPluginCapable
  extends InputTypeHandlers,
    InputTypeActions {
  // will need some kind of list

  renderGroupBox(): ReactInput
  renderTextBox(): ReactInput
  renderTextArea(): ReactInput
  renderRadioGroup(): ReactInput
  renderCheckBox(): ReactInput
  renderFlatButton(): ReactInput
  renderLabel(): ReactInput
  renderButton(): ReactInput
  renderGoogleSuggestionInput(): ReactInput
  renderSelectBoxWithHeading(): ReactInput
  formControls(): ReactInput
  renderWrap(): ReactInput
}

// extends React.ClassAttributes<any>
export interface ObserverInputProps {
  onToggle?: (state: InputStateType) => void
  onClick?: () => void
  className?: string
  elementList?: InputConfig[]

  isHidden?: boolean
  type: InputStringType

  placeholderText?: string
  state?: InputStateType

  // children?: any
  [key: string]: any
}

export type Value = string | number | boolean
export interface InputConfig {
  identifier?: string
  name?: string
  label?: string
  value: Value

  // validator?: ValidatorFunction
  // renderInput?: InputRenderInputProp
  // renderWrap?: InputRenderWrapProp

  // ^ = minimimum requiired
  // v = extensions
  type: string
  state?: InputStateType
}