import React,{PropTypes} from 'react'; 
import {Table} from 'react-bootstrap';  
import CustomScrollbars from './CustomScrollbars';
import cx from 'classnames';
import s from './GroupPicker.scss';



class GroupPicker extends React.Component {
	constructor (props, context) {
		super(props, context); 
		this.loadMore=this.loadMore.bind(this);
		this.focusInput=this.focusInput.bind(this);
		this.onBlurInput=this.onBlurInput.bind(this);
		this.focusInputByClick=this.focusInputByClick.bind(this);
		this.filterPick=this.filterPick.bind(this);
		this.submitPicked=this.submitPicked.bind(this);
		this.onChangeAlias=this.onChangeAlias.bind(this); 
		this.createPersonChannel=this.createPersonChannel.bind(this);
		this.state={
			picks:{},
			picked:{},
			filters:{},
			initFlag:false,
			focusInput:false,
			isFilter:false,
			filter:'',
			alias:'' 
		} 
	} 
	static propTypes={
		submit: PropTypes.func,
		field:PropTypes.object,
		onChange:PropTypes.func,
		multiselect:PropTypes.bool, 
		employeesLookup:PropTypes.object,
		userInfo:PropTypes.object,
		group:PropTypes.object
	}  
	onChangeAlias(e){
        this.setState({
            alias:e.target.value
        })
    } 
    componentDidMount(){
    	const {initFlag}=this.state;
        const {employeesLookup,userInfo,group,multiselect}=this.props; 
        if(Object.keys(employeesLookup)&&Object.keys(employeesLookup).length>0&&!initFlag&&userInfo){
        	const myEmployeesLookup=Object.assign({}, employeesLookup)
            delete myEmployeesLookup[userInfo.user_id]; 
            if(group&&group.members&&multiselect){
            	const picked={},picks={};
            	group.members.map((member,i)=>{ 
            		if(userInfo.user_id!=member){
            			picked[member]=employeesLookup[member];
            			delete myEmployeesLookup[member]; 
            		} 
            	})
            	this.setState({
					picked,
					picks:myEmployeesLookup,
					alias:group.alias,
					initFlag:true
				})
            }else{
            	this.setState({
	            	picks:myEmployeesLookup,
	            	initFlag:true
	            })
            } 
        }
    }
	componentWillReceiveProps(nextProps){
        const {initFlag}=this.state;
        const {employeesLookup,userInfo,group,multiselect}=nextProps; 
        if(Object.keys(employeesLookup)&&Object.keys(employeesLookup).length>0&&!initFlag&&userInfo){
        	const myEmployeesLookup=Object.assign({}, employeesLookup)
            delete myEmployeesLookup[userInfo.user_id]; 
            if(group&&group.members&&multiselect){
            	const picked={},picks={};
            	group.members.map((member,i)=>{ 
            		if(userInfo.user_id!=member){
            			picked[member]=employeesLookup[member];
            			delete myEmployeesLookup[member]; 
            		} 
            	})
            	this.setState({
					picked,
					picks:myEmployeesLookup,
					alias:group.alias,
					initFlag:true
				})
            }else{
            	this.setState({
	            	picks:myEmployeesLookup,
	            	initFlag:true
	            })
            } 
        }
    } 
	loadMore(){

	}
	submitPicked(){
		const {keys,values}=Object; 
		const {picked}=this.state;
		const {submit}=this.props;
		const {alias}=this.state; 
		if(picked&&keys(picked).length>0){
			let parma={};
	        parma.members=keys(picked);
	        parma.alias=alias;
	        submit(keys(picked),keys(values),parma);
		} 
	}
	filterPick(e){
		const {keys,values}=Object;
		const {picks}=this.state;
		const filterArray=values(picks);
		const filterKey=e.target.value;
		const filterBack={};
		filterArray.map((item,i)=>{
			if(	item.pinyinfl.indexOf(filterKey)!=-1||
				item.pinyin.indexOf(filterKey)!=-1||
				item.name.indexOf(filterKey)!=-1){
				filterBack[item.uuid]=item
			}
		}) 
		this.setState({
			isFilter:filterKey.length>0,
			filters:filterBack,
			filter:filterKey
		})
	}
	focusInputByClick(){
		const {input_filter}=this.refs;
		if(input_filter)
			input_filter.focus();
	}
	focusInput(){
		this.setState({
			focusInput:true
		})
	}
	onBlurInput(){
		this.setState({
			focusInput:false
		})
	}
	pickMember(employee,e){
		const {picked,picks,filters,isFilter}=this.state;
		if(employee&&employee.uuid){
			picked[employee.uuid]=employee;
			delete picks[employee.uuid];
			if(isFilter)
				delete filters[employee.uuid];
			this.setState({
				picked,
				picks,
				filters,
				filter:''
			}) 
		}
	}
	unPickMember(employee,e){
		const {picked,picks,filters,isFilter}=this.state;
		if(employee&&employee.uuid&&picked[employee.uuid]){
			if(isFilter)
				filters[employee.uuid]=employee;
			picks[employee.uuid]=employee;
			delete picked[employee.uuid];
			this.setState({
				picked,
				picks,
				filters
			}) 
		}
	}
	createPersonChannel(employee,e){ 
		const {submit}=this.props; 
		if(employee&&employee.uuid){ 
	        submit(employee.uuid);
		} 
	}
	renderList(){
		const {keys,values}=Object;
		const {multiselect}=this.props,self=this;
		const {picks,isFilter,filters}=this.state; 
		const pickList=isFilter?values(filters):values(picks);  
		return (
			<div className={cx(s.picker_list_wrap)}>
				<CustomScrollbars loadMore={this.loadMore} viewStyle={{paddingRight:'10px'}} >
				{pickList.map((employee,i)=>{
					if(!multiselect){
						return (
							<div key={i} className={cx(s.picker_itemp_wrap)} onClick={self.createPersonChannel.bind(self,employee)}>
								<img className={cx(s.picker_itemp_photo)} src={employee.user_image} style={{
						    		height:'40px',
						    		width:'40px'
						    	}}/>
								<div className={cx(s.picker_itemp_body)}>
									<span className={cx(s.display_name)}>{employee.name}</span>
						    		<span className={cx(s.cloud_silver)}>{employee.pinyin}</span>
								</div>
								<div className={cx(s.picker_itemp_body)}>
									<span className={cx(s.cloud_silver)}>{employee.organization}</span>
								</div>
							</div>
						)
					}else{ 
						return (
							<div key={i} className={cx(s.picker_itemp_wrap)} onClick={self.pickMember.bind(self,employee)}>
								<img className={cx(s.picker_itemp_photo)} src={employee.user_image} style={{
						    		height:'40px',
						    		width:'40px'
						    	}}/>
								<div className={cx(s.picker_itemp_body)}>
									<span className={cx(s.display_name)}>{employee.name}</span>
						    		<span className={cx(s.cloud_silver)}>{employee.pinyin}</span>
								</div>
								<div className={cx(s.picker_itemp_body)}>
									<span className={cx(s.cloud_silver)}>{employee.organization}</span>
								</div>
							</div>
						)
					}
				})} 
				</CustomScrollbars>
			</div>
		)
	}
    renderPerson(){
    	const {focusInput,picked,alias,filter}=this.state,self=this;
		const {group}=this.props;
		const {keys,values}=Object;
		const pickeds=values(picked); 
		return(
			<div className={cx(s.pick_wrap)}> 
				<div className={cx(s.pick_input_wrap)}> 
					<div className={cx(s.input_wrap,focusInput?s.active:'')} onClick={this.focusInputByClick}> 
						<input ref='input_filter' value={filter} placeholder={pickeds.length<=0?"查找要添加的成员":""} type="text" onChange={this.filterPick} onFocus={this.focusInput} onBlur={this.onBlurInput}/>
					</div>
					<div className={cx(s.nav_label)}></div>
				</div>
				{this.renderList()}
			</div>
		);
    }
    renderGroup(){
    	const {focusInput,picked,alias,filter}=this.state,self=this;
		const {group}=this.props;
		const {keys,values}=Object;
		const pickeds=values(picked); 
		return(
			<div className={cx(s.pick_wrap)}>
				<div style={{paddingRight: '100px',marginBottom: '15px'}}>
                    <input type="text" className={cx('form-control')}  placeholder='别名'
                    onChange={this.onChangeAlias} value={alias} /> 
                </div>
				<div className={cx(s.pick_input_wrap)}>
					<div onClick={this.submitPicked} className={cx(s.action_btn,pickeds.length>0?s.active:'')}>{group?'修改':'创建'}</div> 
					<div className={cx(s.input_wrap,focusInput?s.active:'')} onClick={this.focusInputByClick}>
						{pickeds&&pickeds.map((employee,i)=>{ 
							return (
								<div key={i} className={cx(s.member_token)} onClick={self.unPickMember.bind(self,employee)}>
									<img className={cx(s.picker_itemp_photo)} src={employee.user_image} style={{
							    		height:'24px',
							    		width:'24px'
							    	}}/>
							    	<span className={cx(s.member_name)}>{employee.name}</span>
							    	<i className={cx('kr_icon',s.member_close)}>&#xe612;</i>
								</div>
							)
						})}  
						<input ref='input_filter' value={filter} placeholder={pickeds.length<=0?"查找要添加的成员":""} type="text" onChange={this.filterPick} onFocus={this.focusInput} onBlur={this.onBlurInput}/>
					</div>
					<div className={cx(s.nav_label)}></div>
				</div>
				{this.renderList()}
			</div>
		);
    }
	render(){   
		const {multiselect}=this.props; 
		if(multiselect)
			return this.renderGroup();
		else
			return this.renderPerson(); 
	}
}

		
export default GroupPicker;