import React,{PropTypes} from 'react'; 
import ReactMediumEditor from './ReactMediumEditor';
import cx from 'classnames'; 
import s from './reactMediumTemplateLess.les';


class ReactMediumTemplate extends React.Component {
	constructor (props, context) {
	    super(props, context);  
	    this.insertHTMLCommand = this.insertHTMLCommand.bind(this);
	    this.state={
			text:'',
			initLoad:false,
			contractName:'',
			contractType:'',
	       	contractNameErr:'',
	       	showCustomTag:false,
	       	fileds:{
	        	emp_fields:[],
	        	cmpany_fields:[]
	       	}
		}
	}
	static propTypes={
		onChange: PropTypes.func,
		choices:PropTypes.array,
		value:PropTypes.oneOfType([
	      PropTypes.string,
	      PropTypes.array,
	      PropTypes.object
	    ]),
		placeholder:PropTypes.string,
		name:PropTypes.string,
		multi:PropTypes.bool,
		error:PropTypes.bool,
		disabled:PropTypes.bool,
		labelKey:PropTypes.string,
		valueKey:PropTypes.string
	} 
	static defaultProps={
        labelKey:'label',
        valueKey:'value',
        choices:[]
    }  
    insertHTMLCommand(item){
    	const { editor } = this.refs;
    	editor.insertHTMLCommand(item);
    }
	render(){
		return( 
			<div className={cx(s.template_editor_wrap)}>
				<div className={cx(s.template_editor_body)}>
				<ReactMediumEditor ref='editor'
	                    style={{overflow:'auto',padding:'0',wordWrap:'break-word',height:'100%'}}
	                    text={this.props.text}
	                    onChange={this.props.onChange} ></ReactMediumEditor>
	            </div> 
			</div>
		)
	}
}
 


export default ReactMediumTemplate;