import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import style from './Input.style'

class Input extends Component {
  static propTypes = {
    password: PropTypes.bool,
    placeholder: PropTypes.string,
    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
    onChange: PropTypes.func,
    visible: PropTypes.bool,
    disabled: PropTypes.bool,
    name: PropTypes.string,
    value: PropTypes.string,
  }

  render() {
    let { name, width, password, placeholder, onChange, visible, disabled, value } = this.props

    width = width || '100%'

    return (
      <input name={name} value={value} type={!visible ? 'hidden' : password ? 'password' : 'text'} disabled={disabled}
        style={[ { width }, style.base ]} placeholder={placeholder} onChange={onChange} />
    )
  }
}

export default Radium(Input)