import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';  
import cx from 'classnames';
import s from './Custom.scss';
import { Button,FormGroup,ControlLabel,FormControl,HelpBlock} from 'react-bootstrap'; 


class RplyTextarea extends React.Component {
    constructor(props) {
        super(props);   
        this.changeMessage=this.changeMessage.bind(this);
        this.sendComment=this.sendComment.bind(this);
        this.state={
            message:'',
            errors:''
        }
    }
    static propTypes = {    
        sendComment:PropTypes.func,
        use:PropTypes.object
    } 
    static defaultProps={
        use:{
            user_image:"./img/user.jpg"
        }
    } 
    changeMessage(e){
        this.setState({
            message:e.target.value,
            errors:''
        })
    }
    sendComment(){
        const {message}=this.state;
        const {sendComment}=this.props;
        console.log(message);
        if(!message){
            this.setState({
                errors:'此项不能为空'
            })
        }else if(!message.replace(/(^\s*)|(\s*$)/g,'')){
           this.setState({
                errors:'此项不能为空格'
            }) 
        }else{
            sendComment(message.replace(/(^\s*)|(\s*$)/g,''));
            this.setState({
                message:''
            })
        }
    }
    render(){   
        const {message,errors}=this.state;
        const {use}=this.props;
        return( 
            <div className={cx(s.rply_textarea_wrap)}>
                <a className={cx(s.member_image)}><img src={use.user_image} /></a>
                <div className={cx(s.member_msg_input)}> 
                    <FormGroup validationState={errors?"error":null}> 
                      <FormControl componentClass="textarea" onChange={this.changeMessage} value={message} />
                      <HelpBlock>{errors}</HelpBlock>
                    </FormGroup>
                    <div className={cx(s.individual_submit,'clearfix')} style={{marginTop:'10px'}}>
                        <p className={cx(s.c_gray,'fl')}>注：你可以按enter进行换行</p>
                        <a className={cx('fr',s.submit_btn)} onClick={this.sendComment} >发布评论</a> 
                    </div>
                </div>
            </div>
        )
    }
}



export default RplyTextarea;