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 './FormRender.scss';



class CheckPicker extends React.Component {
	constructor (props, context) {
	    super(props, context);
	    
	}
	static propTypes={
		onChange: PropTypes.func,
		choices:PropTypes.array,
		values:PropTypes.array,
		multi:PropTypes.bool,
		error:PropTypes.bool,
		disabled:PropTypes.bool,
	} 
	changeCheck(value, e){
		const {multi} = this.props;
		console.log(multi);
		console.log(value);
		console.log(e);
		this.props.onChange(value, multi);
	}
	render(){
		
		const {multi,values, choices}= this.props;
		console.log(choices);
		const self = this;
		if(multi){
			return(
				<div>	
				{values.map((value,index)=>{
					const checked=choices.indexOf(value)==-1?false:true;
					return(
						<Row key={index}>
							<label>
								<input  type="checkbox" checked={checked} onChange={self.changeCheck.bind(self, value)}/>
								<span>{value}</span>
							</label> 
						</Row>
						);
					})
				}
				</div>
			);
			
		}
	  else{
		  let choiced = '';
		  if(choices.length>0){
			  choiced = choices[0];
		  }
		  return(
                    <div className={cx(s.checkbox_group_wrap)}>
                    {
                        values.map((value,i)=>{ 
                            return (
                                <div key={i} className={cx(s.checkbox_wrap,'checkbox')}>
                                    <label  >
                                        <input name="radio" type="radio" checked={(choiced+"")==value} value={value} onChange={self.changeCheck.bind(self,value)} />
                                        <span>{value}</span>
                                    </label>
                                </div>
                            );
                        })
                    }
                    </div>

			);
	  }
	}
}
 


export default CheckPicker;