import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom'; 
import moment from 'moment'; 
import {DatetimePicker} from '../custom';
import cx from 'classnames';
import s from '../FormRender.scss';
 
class DateTimeField extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            defaultDate:moment().format()
        }    
    }
    static propTypes = {    
        label:PropTypes.string,
        placeholder:PropTypes.string,
        field:PropTypes.object,  
        inlineFlag:PropTypes.bool,

    } 
    componentDidMount(){
        const {field,defaultValue}=this.props;
        const {defaultDate}=this.state; 
       field.onChange(field.value||defaultValue||defaultDate);
    }
    render(){  
        const {inlineFlag,label,field,fieldConfig,defaultValue,placeholder}=this.props,self=this;  
        return(  
            <div className={cx(s.field_wrap,'form-group',field.touched&&field.error?'has-error':'',{ 
                'row':inlineFlag
            })}> 
                {label&&<label className={cx('control-label',{
                    'col-sm-3':inlineFlag
                })}>{label}</label>}
                <div className={cx(s.input_wrap,{
                    'col-sm-9':inlineFlag
                })} > 
                    <DatetimePicker onChange={field.onChange} placeholder={placeholder} 
                    defaultValue={field.value||defaultValue||this.state.defaultDate} config={fieldConfig}/> 
                    <span className={cx(s.input_help,'help-block')}><small>{field.touched?field.error:''}</small></span>
                </div>
            </div>   
        )
    }
}
 

export default DateTimeField;