import React from 'react'
import PropTypes from 'prop-types'
import { Field } from 'formik'
import { FormFieldContext } from './FormField'
import Icon from '../units/Icon'

class Input extends React.Component {
  static contextType = FormFieldContext

  static propTypes = {
    type: PropTypes.oneOf(['email', 'text', 'password']).isRequired,
    placeholder: PropTypes.string
  }

  static defaultProps = {
    type: 'text',
    placeholder: null
  }

  constructor (props) {
    super(props)

    this.setStateTimeout = this.setStateTimeout.bind(this)
    this.clearStateTimeout = this.clearStateTimeout.bind(this)
    this.createValidateOnChange = this.createValidateOnChange.bind(this)
    this.createValidateOnBlur = this.createValidateOnBlur.bind(this)
    this.prepareRender = this.prepareRender.bind(this)

    this.state = {
      timeout: null
    }
  }

  componentWillMount () {
    this.validateOnChange = this.createValidateOnChange()
    this.validateOnBlur = this.createValidateOnBlur()
  }

  setStateTimeout (value) {
    this.setState({ timeout: value })
  }

  clearStateTimeout () {
    clearTimeout(this.state.timeout)
  }

  createValidateOnChange (delay = 1000) {
    const setStateTimeout = this.setStateTimeout
    const clearStateTimeout = this.clearStateTimeout
    const {
      name,
      values,
      setFieldTouched,
      setFieldValue,
      validateForm
    } = this.context

    return async function validateOnChange (event) {
      const value = event.target.value
      await setFieldValue(name, value, true)
      await setFieldTouched(name, true, true)
      await new Promise((resolve) => {
        clearStateTimeout()

        setStateTimeout(
          setTimeout(() => (
            resolve(
              validateForm(
                Object.assign(values, {
                  [name]: value
                })
              )
            )
          ), delay)
        )
      })
    }
  }

  createValidateOnBlur () {
    const clearStateTimeout = this.clearStateTimeout
    const {
      name,
      values,
      setFieldTouched,
      validateForm
    } = this.context

    return async function validateOnBlur (event) {
      const value = event.target.value
      clearStateTimeout()
      await setFieldTouched(name, true, true)
      await validateForm(Object.assign(values, { [name]: value }))
    }
  }

  prepareRender () {
    const { name, errors, touched } = this.context

    let controlClassName = 'control'
    let inputClassName = 'input'
    let icon = null

    if (touched[name]) {
      let iconName = ''
      controlClassName += ' has-icons-right'

      if (errors[name]) {
        inputClassName += ' is-danger'
        iconName = 'fa-exclamation-triangle'
      } else {
        inputClassName += ' is-success'
        iconName = 'fa-check'
      }

      icon = (
        <Icon
          name={iconName}
          size="is-small"
          position="is-right" />
      )
    }

    return { controlClassName, inputClassName, icon }
  }

  render () {
    const { name, values } = this.context
    const { type, placeholder } = this.props
    const { controlClassName, inputClassName, icon } = this.prepareRender()
    return (
      <div className={controlClassName}>
        <Field
          className={inputClassName}
          name={name}
          type={type}
          value={values[name]}
          placeholder={placeholder}
          onChange={this.validateOnChange}
          onBlur={this.validateOnBlur}
        />
        {icon}
      </div>
    )
  }
}

export default Input