import React,{PropTypes} from 'react'; 
import { connect } from 'react-redux';
import {loadEmployees,loadOrganizations} from '../../redux/actions/hrSetting';
import Select from 'react-select';
import 'react-select/dist/react-select.css'; 
import cx from 'classnames';
import s from './MemberPicker.scss';



class GravatarOption extends React.Component {
	static propTypes={
		children: PropTypes.node,
		className: PropTypes.string,
		isDisabled: PropTypes.bool,
		isFocused: PropTypes.bool,
		isSelected: PropTypes.bool,
		onFocus: PropTypes.func,
		onSelect:  PropTypes.func,
		onUnfocus: PropTypes.func,
		option: PropTypes.object.isRequired
	}
	handleMouseDown (event) {
		event.preventDefault();
		event.stopPropagation();
		this.props.onSelect(this.props.option, event);
	}
	handleMouseEnter (event) {
		this.props.onFocus(this.props.option, event);
	}
	handleMouseMove (event) {
		if (this.props.isFocused) return;
		this.props.onFocus(this.props.option, event);
	}
	handleMouseLeave (event) {
		this.props.onUnfocus(this.props.option, event);
	}
	render(){
		return(
			<div className={this.props.className}
				style={this.props.option.style}
				onMouseDown={this.handleMouseDown.bind(this)}
				onMouseEnter={this.handleMouseEnter.bind(this)}
				onMouseMove={this.handleMouseMove.bind(this)}
				onMouseLeave={this.handleMouseLeave.bind(this)}
				title={this.props.option.title}> 
				{this.props.children}
			</div>
		)
	}
}

class GravatarValue extends React.Component {
	static propTypes={
		children: PropTypes.node,
		value: PropTypes.object
	}
	render(){
		return(
			<div className="Select-value"  >
				<span className="Select-value-label"> 
					{this.props.children}
				</span>
			</div>
		)
	}
}

const stringOrNode =  PropTypes.oneOfType([
	PropTypes.string,
	PropTypes.array,
	PropTypes.node
]);

export class MemberPicker extends React.Component { 
	constructor(props) {
        super(props);
        this.changeMember=this.changeMember.bind(this);
        this.state={
        	 
        }    
    }
    static propTypes = {    
	    label:PropTypes.string, 
	    help:PropTypes.string, 
	    placeholder:PropTypes.string, 
	    onChange:PropTypes.func, 
	    multi:PropTypes.bool,
	    valueKey:PropTypes.string,
	    labelKey:PropTypes.string,
	    dispatch:PropTypes.func,
	    validateState:PropTypes.string,
	    value:stringOrNode
	}
	static defaultProps = {   
    	multi:true,
    	valueKey:'uuid',
    	labelKey:'name'
	} 
	componentDidMount(){
		const {needLoadOrg,needLoadEmp,dispatch}=this.props;
		if(needLoadEmp){
			dispatch(loadEmployees()); 
		}
		if(needLoadOrg){
			dispatch(loadOrganizations()); 
		}
	}
	filterOptions(options, filterValue, excludeOptions){ 
		const self=this;
		if (self.props.ignoreCase) {
			filterValue = filterValue.toLowerCase();
		} 
		const newOptions=options.filter(option=>{ 
			if (excludeOptions && excludeOptions.indexOf(option[self.props.valueKey]) > -1) return false;
			if((option.extra&&option.extra.pinyined_first_rune&&option.extra.pinyined_first_rune.indexOf(filterValue)!=-1)
			||option.name.indexOf(filterValue)!=-1)
				return true;
			
		}); 
		return newOptions;
	}
	changeMember(value,values){
		this.props.onChange(value,values);
	}
    render () {
    	const self=this; 
		const {employees,organizations,label,multi,help,valueKey,labelKey,placeholder,validateState,value}=this.props;
    	const all=employees.concat(organizations);
    	return (
    		<div className={cx('form-group',{
                'has-success':validateState=='success',
                'has-warning':validateState=='warning',
                'has-error':validateState=='error' 
            },validateState=='error'?s.has_error:'',
            validateState=='warning'?s.has_warning:'',
            validateState=='success'?s.has_success:'')}>
				<label className={cx('control-label')}>
					<span>{label}</span>
				</label>
				<Select className={cx(s.control_input)} value={value} onChange={this.changeMember} filterOptions={this.filterOptions} valueKey={valueKey} 
					labelKey={labelKey} multi={multi} options={all} placeholder={placeholder}  />
		        <span className="help-block">{help}</span>
	        </div>
    	)
    }
}


const mapStateToProps = (state) => { 
  const {environment:{resource}}= state; 
  const {hrSetting:{employees,organizations,needLoadOrg,needLoadEmp}}= state;
  return {
    resource, 
    employees,
    organizations,
    needLoadOrg,
    needLoadEmp
  };
}

export default connect(mapStateToProps)(MemberPicker);