import React,{PropTypes} from 'react'; 
import {Table,ButtonGroup,Button,Modal,OverlayTrigger,Input,FormControls,Grid,Row,Col} from 'react-bootstrap'; 
import Select from 'react-select';
import 'react-select/dist/react-select.css'; 
import cx from 'classnames';
import s from './CheckMember.scss';



class CheckMember extends React.Component {
	constructor (props, context) {
	    super(props, context);
	    this.onChange = this.onChange.bind(this);
		this.state={
			checked:false
		}
	}
	static propTypes={
		onChange: PropTypes.func,
		imageUrl:PropTypes.string,
		name:PropTypes.string,
		uuid:PropTypes.string,
		item:PropTypes.object
	} 

	onChange(){
		const {item}=this.props;
		const {checked} = this.state;
		if(checked==false){
			this.setState({checked:true});
		}
		else{
			this.setState({checked:false});
		}
		this.props.onChange(item);
	}

	render(){
		
		const {imageUrl, name}= this.props;
		const {checked} = this.state;
		const imageStyle = {'backgroundImage': 'url('+imageUrl+')'};
		return(
				<div className={cx(s.member_token)}>
					<input  type="checkbox" checked={checked} onChange={this.onChange}/>
					<span className={cx(s.member_image, s.thumb_24)} style={imageStyle}>
					</span>
						{name}
				</div>
			);
			
		}
}
 


export default CheckMember;