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


class DropdownField extends React.Component {
    constructor(props) {
        super(props);    
    }
    static propTypes = {    
        formField:PropTypes.object,
        field:PropTypes.object,
        validateState:PropTypes.string,
        inlineFlag:PropTypes.bool
    } 
    transformSelectOptions(choices){
        const items=[]
        if(choices&&choices.length>0){
            choices.map((item,i)=>{
                items.push({
                    value:item,
                    label:item
                })
            })
        }
        return items;
    }
    render(){  
        const {formField,validateState,inlineFlag,field,type}=this.props,self=this; 
        const options=JSON.parse(formField.options);
        const choices=this.transformSelectOptions(options.choices);
        return( 
            <div className={cx(s.field_wrap,'form-group',{
                'has-success':validateState=='success',
                'has-warning':validateState=='warning',
                'has-error':validateState=='error',
                'row':inlineFlag
            })}> 
                <label className={cx('control-label',{
                    'col-sm-3':inlineFlag
                })}>{formField.display_name}</label>
                <div className={cx(s.input_wrap,{
                    'col-sm-9':inlineFlag
                })} > 
                    <DropdownPicker name={formField.name} value={field.value} choices={choices} 
                    placeholder={options.tooltip} onChange={field.onChange} 
                    multi={formField.display_type?formField.display_type=='multiselect':false}
                    error={validateState=='error'} disabled={'readOnly'==type}/>
                    <span className={cx(s.input_help,'help-block')}><small>{field.touched?field.error:''}</small></span>
                </div>
            </div>   
        )
    }
}



export default DropdownField;