import React from 'react'
import styles from './styles'
import label from './label'
import dropdowntheme from './dropdowntheme'
import Dropdown from 'react-toolbox/lib/dropdown'
import PropTypes from 'prop-types'

class TextField extends React.Component {
  constructor () {
    super()
    this.state = {
      focus: false
    }
  }
  handleChange (e) {
    if (this.props.onChange) {
      this.props.onChange(e)
    }
  }

  handleFocus () {
    this.setState({
      focus: true
    })
  }

  handleBlur () {
    this.setState({
      focus: false
    })
  }

  render () {
    let props = {...this.props}
    delete props.label
    let focusedStyle = this.state.focus ? ' ' + styles.focused : ''
    return (
      <div className={styles.formControl + focusedStyle}>
        {
          this.props.label ? (
            <label className={styles.label}>{this.props.label}</label>
          ) : null
        }
        <div className={styles.inputContainer}>
          <Dropdown
            auto
            onChange={this.handleChange.bind(this)}
            value={this.props.value}
            theme={dropdowntheme}
            {...props}
          />
        </div>
      </div>
    )
  }
}

TextField.propTypes = {
  label: PropTypes.string,
  value: PropTypes.any,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
}

export default TextField