import React from 'react'
import styles from './styles'
import label from './label'
// import MuiTextField from 'material-ui/TextField'
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 inputProps = {
    //   classes: textfield
    // }
    // let inputLabelProps = {
    //   classes: label,
    //   shrink: true
    // }
    // <MuiTextField fullWidth style={{ marginTop: 16 }} InputLabelProps={inputLabelProps} InputProps={inputProps} {...this.props}/>
    let props = {...this.props}
    delete props.label
    delete props.onChange
    delete props.onFocus
    delete props.onBlur
    props.value = props.value ? props.value : ''
    if (props.InputProps) {
      props = {
        ...props,
        ...props.InputProps
      }
    }
    delete props.InputProps
    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}>
          <input
            onChange={this.handleChange.bind(this)}
            onFocus={this.handleFocus.bind(this)}
            onBlur={this.handleBlur.bind(this)}
            {...props} />
        </div>
      </div>
    )
  }
}

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

export default TextField