import React,{PropTypes} from 'react';   
import {connect} from 'react-redux';
import cx from 'classnames'; 
import s from './rongClund.les';    
import { Layout,Icon,Row,Col,Button,Badge} from 'antd';
import {addNewMessage,changeIMShow,choiceMessage,addMyMessage} from '../../redux/actions/workIMAction';
import Textarea from "react-textarea-autosize"; 
import * as types from '../../redux/constants/ActionTypes';   
import store from 'store2'; 

const { Header, Footer, Sider, Content } = Layout;

const backUserList = (userMap) =>{
	const keys=Object.keys(userMap);
	let userlist=[];
	keys.map((key,i)=>{
		if(i==0){
			userlist.push(userMap[key]);
		}else{
			const preUser=userlist.shift();
			if(userMap[key].receivedTime>=preUser.receivedTime){
				userlist=[userMap[key],preUser].concat(userlist);
			}else{
				userlist=[preUser,userMap[key]].concat(userlist);
			}
		}	
	});
	return userlist;
}


export class RongClundWrap extends React.Component { 
	constructor(props) {
        super(props);  
        this.toggle = this.toggle.bind(this); 
        this.changeSend = this.changeSend.bind(this);
        this.sendMessage = this.sendMessage.bind(this);  
		this.state={ 
			collapsed: true,
			send:'' 
		}
    }
    static propTypes = { 
		 
	}  
	componentDidMount(){ 
	} 
    componentWillReceiveProps(nextProps){  
    }
	componentWillUnmount() {  
	}    
	toggle(){
		this.setState({
	      collapsed: !this.state.collapsed,
	    });
	}
	selecedUser(user){ 
		const {dispatch,userMap} = this.props; 
		if(userMap&&user&&userMap[user.senderUserId]){
			userMap[user.senderUserId].count=0; 
			const message = userMap[user.senderUserId];
			dispatch({
		        type        : types.LOAD_USER_MAP,
		        userMap     : Object.assign({},userMap)
		    }); 
		    dispatch({
		        type            : types.CHANGE_MESSAGES,
		        selecedUser     : message.senderUserId,
		        messages        : message.messages.concat([])
		    });  
			this.setState({
		      collapsed: false,
		    });
		}
	}
	changeSend(value){
		console.log(value);
		this.setState({
			send:value.target.value
		})
	}
	sendMessage(){
		const {send} = this.state,self=this; 
		const {selecedUser,userMap,dispatch,user} = this.props; 
		const msgContent = RongIMLib.TextMessage.obtain(send);
		RongIMClient.getInstance().sendTextMessage(RongIMLib.ConversationType.PRIVATE, selecedUser,send,{
			onSuccess: function(message) { 
				// dispatch(addMyMessage(message,selecedUser,userMap,user)); 
				self.setState({  
					send:""
				})
			   	// console.log("Send Successfully" +JSON.stringify(message));
			   	if(userMap[selecedUser]&&userMap[selecedUser].messages){
                    userMap[selecedUser].messages.push({
                        content:message.content.content,
                        sentTime:message.sentTime,
                        senderUserId:message.senderUserId,
                        name:user.name,
                        type:'my'
                    });
                    dispatch({
                        type            : types.CHANGE_MESSAGES,
                        selecedUser     : selecedUser,
                        messages        : userMap[selecedUser].messages.concat([])
                    });
                }else if(userMap[selecedUser]){
                    userMap[selecedUser].messages=[{
                        content:message.content.content,
                        sentTime:message.sentTime,
                        senderUserId:message.senderUserId,
                        name:user.name,
                        type:'my'
                    }];
                    dispatch({
                        type            : types.CHANGE_MESSAGES,
                        selecedUser     : selecedUser,
                        messages        : userMap[selecedUser].messages.concat([])
                    });
                }
                dispatch({
                    type        : types.LOAD_USER_MAP,
                    userMap
                });  
                store(user.id, Object.assign({},userMap)); 
			},
			onError: function(errorcode,message) {
			    console.log("SendMessage,errorcode:" + errorcode);
			}
		});
	} 
    render(){   
    	const {showChat,userMap,messages=[],selecedUser,tenant} = this.props;
    	const {send,userImg}=this.state;
    	const users=backUserList(userMap);
    	const currentUser=userMap[selecedUser];
    	if(showChat){
    		return(
				<div className={cx(s.rong_clund_wrap,this.state.collapsed?null:s.open)}>
				 	<Layout className={cx(s.rong_clund_layout)}> 
					    <Layout>
					    	<Header className={cx(s.rong_clund_head)}> 
					    		{<div className={cx(s.rong_clund_user_list_head,s.left)}>
						       		咨询列表
						       	</div>}
					        	<Icon className={cx(s.rong_clund_head_close)} type="close-circle"  onClick={()=>{
				    				const {dispatch} = this.props;
				    				dispatch(changeIMShow(!showChat));
				    			}}/>
					        </Header>
					        <Content className={cx(s.user_list_show_wrap)}> 
						      	<ul className={cx(s.rong_clund_user_list_body_wrap)}>
						      		{
						      			users.map((user,i)=>{
						      				return (
						      					<li key={i} className={cx(user.senderUserId==selecedUser?s.seleced:null)} onClick={this.selecedUser.bind(this,user)}>
									      			<Badge count={user.count}>
									      			 	<img src="/img/招聘头像.png" alt=""/> 
								      				</Badge> 
								      				<span>{user.name}</span> 
									      		</li>
						      				)
						      			}) 
						      		} 
						      		<li></li>  
						      	</ul>
					      	</Content>  
					    </Layout>
					   	<Sider width={300} className={cx(s.rong_clund_user_list,this.state.collapsed?s.close:null)}
				       	 collapsedWidth={0} collapsed={this.state.collapsed} >  
						    <Layout style={{height:'100%'}}>
						        <Content  className={cx(s.messages_show_wrap)}>
						    		<div className={cx(s.rong_clund_user_message_head)}  >
						        		{currentUser&&currentUser.name}
						        		{<Icon className={cx(s.rong_clund_head_user_list_btn)} type={this.state.collapsed?"right-circle":"left-circle"} onClick={this.toggle}/>}
						        	</div>
						        	<div className={cx(s.messages_wrap)} >
							        	{
							        		messages.map((msg,i)=>{ 
							        			if(msg.type=='user'){
							        				return (
									        			<div className={cx(s.messages_item_wrap,s.left)} key={i}>
									        				<img style={{width:'24px',height:'24px',borderRadius:'50%',marginRight:'4px'}}
  															 onError={()=>{this.setState({userImg:'/img/招聘头像.png'})}} src={userImg?userImg:`https://hropublic.oss-cn-beijing.aliyuncs.com/user_image/users/${msg.senderUserId}?t=${new Date().getTime()}`} 
									        				 alt=""/>
									        				<span className={cx(s.messages_item_body)}>{msg.content}</span>
									        			</div>
									        		)
							        			}else{
							        				return (
									        			<div className={cx(s.messages_item_wrap,s.right)} key={i}> 
									        				<span className={cx(s.messages_item_body)}>{msg.content}</span>
									        				<img  style={{width:'24px',height:'24px',borderRadius:'50%',marginLeft:'4px'}}  className={cx(s.messages_item_img)} src={`https://hropublic.oss-cn-beijing.aliyuncs.com/user_image/tenants/${tenant.id}/users/${msg.senderUserId}?t=${new Date().getTime()}`} alt=""/>
									        			</div>
									        		)
							        			} 
								        	})
							        	} 
						        	</div> 
						        </Content>
						        <Footer className={cx(s.rong_clund_footer)}>
						        	<Row>
								      <Col span={16} style={{lineHeight: 1.4,borderColor:'transparent'}}> 
								      	  <Textarea style={{width:'100%',borderColor:'transparent',outline:'none'}} 
											minRows={3}
											maxRows={3}
											placeholder="请输入文字..." onChange={this.changeSend} value={send}/>
								      </Col>
								      <Col span={8} style={{textAlign:'right'}}>
								      	 <Button onClick={this.sendMessage} type="primary" size={'large'}>发送</Button>
								      </Col>
								    </Row>
					       	 	</Footer> 
						    </Layout> 
					    </Sider>
					</Layout>
				</div>
			);
    	}else{
    		return (
    			<div className={cx(s.rong_clund_btn_wrap)} onClick={()=>{
    				const {dispatch} = this.props;
    				dispatch(changeIMShow(!showChat));
    			}}>
    				IM
    			</div>
    		);
    	}
    	
	}
} 



const mapState = (state) => {  
    const { workIM:{appid,token,userMap,messages,showChat,selecedUser}} = state;
    const { authed:{userInfo={}}} = state;
    const {user,tenant} = userInfo;
    return {
	    appid, 
	    token,
	    userMap,
	    showChat,
	    messages,
	    selecedUser,
	    user,
	    tenant
    }
};

export default connect(mapState)(RongClundWrap);