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 {Gravatar} from './ChatWidget';
import 'react-select/dist/react-select.css'; 
import cx from 'classnames';
import s from './Member.scss';



class Member extends React.Component {
	constructor (props, context) {
		super(props, context);
		this.onClick = this.onClick.bind(this);
		this.onChange = this.onChange.bind(this);
	}

	static propTypes={
		onClick: PropTypes.func,
		onChange: PropTypes.func,
		imageUrl:PropTypes.string,
		name:PropTypes.string,
		myself:PropTypes.bool,
		checked:PropTypes.bool,
		uuid:PropTypes.string,
		choiceType:PropTypes.string,
		item:PropTypes.object
	}  

	onClick(){
		const {uuid, item}=this.props;
		this.props.onClick(uuid, item);
	}

	onChange(){
		const {uuid, item}=this.props;
		this.props.onChange(uuid, item);
	}

	render(){ 
		const {name,choiceType, checked,myself,imageUrl}=this.props;console.log(imageUrl);
		return(
			<div className={cx(s.member_token)} onClick={this.onClick}>
				{choiceType=='multi'&&<input  type="checkbox" checked={checked} onChange={this.onChange}/>}
				<Gravatar path={imageUrl||'/img/user.jpg'} size='60'></Gravatar> 
				<div className={cx(s.member_info)}>
					<div className={cx(s.member_info_item)}>{name}</div>
				</div>
				<div className={cx(s.member_state)}>
					<i className={cx('ts_icon','ts_icon_presence_online',myself?s.myself:s.other)} title="online" ></i>
				</div> 
			</div>
		);
	}
}

		
export default Member;