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


class DropdownField extends React.Component {
    constructor(props) {
        super(props);    
        this.changeDropdown=this.changeDropdown.bind(this);
    }
    static propTypes = {    
        displayName:PropTypes.string,
        field:PropTypes.object,
        validateState:PropTypes.string,
        inlineFlag:PropTypes.bool,
        placeholder:PropTypes.string,
        options:PropTypes.array,
        multiselect:PropTypes.bool,
        labelKey:PropTypes.string,
        valueKey:PropTypes.string,
        onChange:PropTypes.func
    }  
    static defaultProps={
        inlineFlag:false,
        multiselect:false, 
        labelKey:'label',
        valueKey:'value',
        options:[]
    }
    validationState(field){
        if(field.error&&field.touched){
            return 'error';
        }else if(field.touched)
            return ''; 
    }
    changeDropdown(value,object){
        const {field,onChange}=this.props;
        if(onChange){
            onChange(value,object);
        }else{
            field.onChange(value,object);
        }
    }
    render(){  
        const {displayName,options,inlineFlag,field,placeholder,multiselect,labelKey,valueKey}=this.props,self=this;   
        let validateState=this.props.validateState?this.props.validateState:this.validationState(field);
        let styleLabel={};
        if(!displayName||displayName.length<1){
            styleLabel={display:'none'};
        }
        return( 
            <div className={cx(s.field_wrap,'form-group',{
                'has-success':validateState=='success',
                'has-warning':validateState=='warning',
                'has-error':validateState=='error',
                'row':inlineFlag
            })}> 
                <label style={styleLabel} className={cx('control-label',{
                    'col-sm-3':inlineFlag
                })}>{displayName}</label>
                <div className={cx(s.input_wrap,{
                    'col-sm-9':inlineFlag
                })} > 
                    <DropdownPicker value={field.value} choices={options} 
                    placeholder={placeholder} onChange={this.changeDropdown} 
                    multi={multiselect} 
                    labelKey={labelKey} valueKey={valueKey} 
                    error={validateState=='error'}  />
                    <span className={cx(s.input_help,'help-block')}><small>{field.touched?field.error:''}</small></span>
                </div>
            </div>   
        )
    }
}



export default DropdownField;