// modules
import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe, isFunction, isObj, NO_OP } from 'exotic'
import { ErrorMessage } from 'atoms/Error'
import { PasswordIcon } from 'atoms/Icons/PasswordIcon'
import { Icons } from 'atoms/Icons'
import { InputState as State } from 'src/forms/input/InputState'
// local
import {
  StyledInput,
  StyledLabel,
  StyledInputWrapper,
  StyledShowPasswordIcon,
  InputWithIconWrapper,
} from './styled'
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'
import { classes } from './fixture'

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

@observer
class TextBox extends React.Component<TextBoxProps, TextBoxState>
  implements TextBoxComponent {
  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(event, this.props, this.state)
    this.blurMiddleware(event)
  }

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

  // show password functionality
  handleShowPassword = event => {
    if (this.state.type === 'password') {
      this.state.setType('text')
    } else {
      this.state.setType('password')
    }
  }

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

  // ========= render
  render() {
    const {
      passthroughProps,
      validationProps,
      placeholderText,
      animatePlaceholder,
      name,
      ariaLabel,
      labelText,
      isDisabled,
      type,
      title,
      dataQa,
      qa,
      wrapperProps,
      inputIcon,
    } = toAttributes(this)
    const { renderPlaceholder, renderError, autoFocus } = 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 === 'oldPassword' ||
        name === 'password' ||
        name === 'newPassword' ||
        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}
        className={classes.errorMessage}
      />
    )

    const inputClassName = inputIcon
      ? (isSafe(inputIcon.className) ? inputIcon.className : '') +
        ' ' +
        (inputIcon.position === 'left' ? 'align-left' : '')
      : ''

    const handleIconClick = args => {
      const { onIconClick } = this.props
      if (isFunction(onIconClick)) {
        onIconClick(args)
      }
    }

    const inputWithIcon = inputIcon ? (
      <InputWithIconWrapper
        className={inputClassName}
        onClick={handleIconClick}
      >
        <Icons
          breedType={inputIcon.breedType}
          type={inputIcon.type}
          breed={inputIcon.breed}
          fill={inputIcon.fill ? inputIcon.fill : 'black'}
          stroke={inputIcon.stroke ? inputIcon.stroke : 'black'}
          width={inputIcon.width ? inputIcon.width : '30px'}
          height={inputIcon.height ? inputIcon.height : '30px'}
        />
      </InputWithIconWrapper>
    ) : (
      ''
    )
    const qaAttribute = dataQa ? dataQa : qa ? qa : ''

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

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