// 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'
import { ErrorMessage } from 'atoms/Error'
import { FormPasswordIcon } from 'atoms/Icons/FormPasswordIcon/index'
// local
import State from './State'
import { StyledInput, StyledLabel, StyledInputWrapper, StyledShowPasswordIcon } 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)
  }

  renderPasswordIcon = type => {
    const passwordVisible = type !== 'password'
    return (
      <StyledShowPasswordIcon onClick={this.handleShowPassword} key="textbox-password-show-hide">
        <FormPasswordIcon passwordVisible={passwordVisible} />
      </StyledShowPasswordIcon>
    )
  }

  // ========= render
  render() {
    const {
      passthroughProps,
      validationProps,
      placeholderText,
      animatePlaceholder,
      name,
      ariaLabel,
      labelText,
      isDisabled,
      type,
      title,
      dataQa,
      wrapperProps,
    } = toAttributes(this)
    const { renderPlaceholder, renderError } = this.props
    const Wrap = toWrap(this.props)

    const placeholderView = animatePlaceholder ? (
      <StyledLabel
        key="placeholder-label"
        className={'input-box-label'}
        isLabelOnTop={this.state.value !== ''}
      >
        {placeholderText}
      </StyledLabel>
    ) : (
        ''
      )

    const placeholderAttribute = animatePlaceholder ? '' : placeholderText

    // const placeholderView = renderPlaceholder(this.props, this.state)

    const labelTextView = labelText ? (
      <StyledLabel
        key="textbox-label"
        className={'input-box-label'}
        isLabelOnTop
      >
        {labelText}
      </StyledLabel>
    ) : (
        ''
      )

    const passwordIcon =
      (name === 'password' || name === 'confirmPassword' || name === 'securityCode') &&
      this.renderPasswordIcon(type)

    // const errorMessageView = renderError(this.props, this.state)

    const errorMessageView = this.state.isValidInput === false && (
      <ErrorMessage
        key="textbox-error-message"
        text={this.state.errorMessage}
      />
    )

    return (
      <Wrap {...wrapperProps}>
        {labelTextView}
        {placeholderView}
        <StyledInputWrapper key="textbox-input-wrap">
          <StyledInput
            key="textbox-input"
            type={type}
            onChange={this.handleChange}
            value={this.state.value || this.props.value}
            onFocus={this.handleFocus}
            onBlur={this.handleBlur}
            name={name}
            title={title}
            {...passthroughProps}
            {...validationProps}
            // @todo @fixme - not working in passthroughProps
            autoComplete={this.props.autocomplete}
            placeholder={placeholderAttribute}
            disabled={isDisabled}
            data-qa={dataQa}
            aria-label={ariaLabel}
          />
          {passwordIcon}
          {errorMessageView}
        </StyledInputWrapper>
      </Wrap>
    )
  }
}

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