import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';  
import {Input,FormControls} from 'react-bootstrap'; 
import cx from 'classnames';
import s from './CustomForm.scss';


class CheckBoxGroup extends React.Component {
    constructor(props) {
        super(props);
        this.changeCheckBox=this.changeCheckBox.bind(this);    
    }
    static propTypes = {    
        displayName:PropTypes.string,
        field:PropTypes.object, 
        fields:PropTypes.object, 
        inlineFlag:PropTypes.bool,
        placeholder:PropTypes.string,
        options:PropTypes.array,
        style:PropTypes.object 
    } 
    static defaultProps={
        inlineFlag:false 
    }
    validationState(field){
        if(field&&field.error&&field.touched){
            return 'error';
        }else if(field&&field.touched)
            return ''; 
    }
    changeCheckBox(e){
        const {fields,field,name}=this.props; 
        if(fields)
            fields[e.target.value].onChange(e.target.checked);
        else{
            const temp=[];
            $("input[name='"+name+"']:checked").each(function(index,check){
                temp.push($(check).val());
            });
            field.onChange(temp.join(","));
        }
    }
    render(){  
        const {style,displayName,inlineFlag,field,fields,placeholder,options,name}=this.props,self=this;  
        let validateState=this.validationState(field);
        const checkboxs=field?field.value:'';
        return( 
            <div className={cx(s.field_wrap,'form-group',{
                'has-success':validateState=='success',
                'has-warning':validateState=='warning',
                'has-error':validateState=='error',
                'row':inlineFlag
            })} style={style}> 
                <label className={cx('control-label',{
                    'col-sm-3':inlineFlag
                })}>{displayName}</label>
                <div className={cx(s.input_wrap,{
                    'col-sm-9':inlineFlag
                })} > 
                    <div className={cx(s.checkbox_group_wrap)} placeholder={placeholder} ref={name+'_checkbox_group'}>
                    {
                        options.map((option,i)=>{ 
                            return (
                                <div key={i} className={cx(s.checkbox_wrap,'checkbox')}>
                                    <label  >
                                        {fields&&<input name={name} type="checkbox" value={option.value} checked={fields[option.value].value} onChange={this.changeCheckBox}/>}
                                        {!fields&&<input name={name} type="checkbox" value={option.value} checked={checkboxs&&checkboxs.indexOf(option.value)!=-1} onChange={this.changeCheckBox}/>}
                                        <span>{option.label}</span>
                                    </label>
                                </div>
                            );
                        })
                    }
                    </div>
                    <span className={cx(s.input_help,'help-block')}><small>{field&&field.touched?field.error:''}</small></span>
                </div>
            </div> 
        )
    }
}



export default CheckBoxGroup;