import React from 'react'
import { Serializable } from 'exotic'
import {
  HTMLInputElementReact,
  InputValue,
  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 | React.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 {
  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: HTMLInputElementReact

  // @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
}

export type InputStateComposedType = InputStateType & InputStateMethodsType

// export interface ObserverInputType<T = InputStateType> extends T {
// <Props = {}, State = any> extends React.Component<Props, State>
export interface ObserverInputComponent {
  state: InputStateType
  // meh
  // setState(state): any

  props: {
    placeholderText: ''
    state: undefined
    type: InputStringType
    [key: string]: any
  }
}

export interface InputTypeHandlers {
  // ChangeEventHandler
  handleChange(event: MouseEvent): void
  handleFocus(event: MouseEvent): void
  handleBlur(event: MouseEvent): void
}
export type ReactInput = React.ComponentElement<
  InputStateType,
  ObserverInputComponent
>
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
}

export interface ObserverInputProps extends React.ClassAttributes<any> {
  //
}