// modules
import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe, isFunction, isObj, isString, isBoolean, hasOwnProp, EMPTY_OBJ } from 'exotic'
import toClassName from 'classnames'
// local
import State from './State'
import { StyledInput } from './_elements'
import { autofixProps, fromEventToValue, fromChangeEventToValues, toAttributes } from './deps'
import { blurMiddleware, focusMiddleware, handleBlur, handleFocus, handleChange } from './handlers'
import { TextBoxProps, TextBoxState, TextBoxComponent, AccessibleTextBoxProps } from './typings'
import {
  renderPlaceholder as defaultRenderPlaceholder,
  renderError as defaultRenderError,
  toWrap,
} from './_renderProps'

function toState(props: TextBoxProps): TextBoxState {
  // or is instanceof
  if (isObj(props.state) && isFunction(props.state.setValue)) {
    return props.state
  } else {
    const state = new State()
    state.IS_DEFAULT = true
    return state
  }
}

@observer
class TextBox extends React.Component<TextBoxProps, TextBoxState> implements TextBoxComponent {
  // this is used on some exprots, should deprecate
  static State = State
  static defaultProps = {
    type: 'text',
    // customAttributes: EMPTY_OBJ,
    animatePlaceholder: true,
    wrapperClassName: '',
    className: '',
    renderPlaceholder: defaultRenderPlaceholder,
    renderError: defaultRenderError,
  }

  constructor(props: TextBoxProps) {
    super(props)
    this.state = toState(this.props)
  }

  // @action
  focusMiddleware = () => {
    focusMiddleware.call(this, event, this.props, this.state)
  }

  // @action
  blurMiddleware = event => {
    blurMiddleware.call(this, event, this.props, this.state)
  }

  handleFocus = event => {
    // @todo too much, simplify
    handleFocus(event, this.props, this.state)
    this.focusMiddleware()
  }

  handleBlur = event => {
    // @todo too much, simplify
    // handleBlur.call(this, this.props, this.state)
    this.blurMiddleware(event)
  }

  handleChange = event => {
    handleChange.call(this, event, this.props, this.state)
  }

  // ========= render
  render() {
    const {
      passthroughProps,
      validationProps,
      placeholderText,
      animatePlaceholder,
      name,
      isDisabled,
      type,
      dataQa,
      wrapperProps,
    } = toAttributes(this)
    const { renderPlaceholder, renderError } = this.props
    const Wrap = toWrap(this.props)
    const placeholderAttribute = animatePlaceholder ? '' : placeholderText
    const placeholderView = renderPlaceholder(this.props, this.state)
    const errorMessageView = renderError(this.props, this.state)

    return (
      <Wrap {...wrapperProps}>
        {placeholderView}
        <StyledInput
          type={type}
          onChange={this.handleChange}
          value={this.state.value || this.props.value}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          name={name}
          {...passthroughProps}
          {...validationProps}
          placeholder={placeholderAttribute}
          disabled={isDisabled}
          data-qa={dataQa}
        />
        {errorMessageView}
      </Wrap>
    )
  }
}

export { TextBox }
export { TextBox as TextInput }
export default TextBox