import React, { Component, PropTypes } from 'react'

import CSSModules from 'react-css-modules'

import styles from './index.styl'

@CSSModules(styles, { allowMultiple: true, errorWhenNotFound: false })

export default class extends Component {

static propTypes = {

inputWidth: PropTypes.string,

labelWidth: PropTypes.string,

value: PropTypes.oneOfType([

PropTypes.string,

PropTypes.number

]),

onChange: PropTypes.func,

onBlur: PropTypes.func,

disabled: PropTypes.bool,

required: PropTypes.bool,

limited: PropTypes.number

}

static defaultProps = {

inputWidth: '200px'

}

handleChange (e) {

this.props.onChange(e)

}

handleBlur (e) {

if (this.props.limited) {

e.target.value = e.target.value.substr(0, this.props.limited)

this.props.onChange(e)

}

if (typeof this.props.onBlur === 'function') {

this.props.onBlur(e)

}

}

render () {

return (

<div styleName='InputOuter'>

<label styleName='labelContainer'>

{

this.props.label

? <span styleName={this.props.required ? 'label required' : 'label'} style={Object.assign({}, {width: this.props.labelWidth})}>{this.props.label}</span>

: <span></span>

}

<div styleName='inputContainer'>

<input

{ ...this.props }

style={Object.assign({}, {width: this.props.inputWidth})}

onChange={this.handleChange.bind(this)}

onBlur={this.handleBlur.bind(this)} /></div>

</label>

</div>

)

}

}