import {default as React, Component } from 'react';
import { render } from 'react-dom';
import { dataOperation } from '../service/DataOperation';
import { defaultTypes, defaultIndexType } from '../service/default';

export class Editable extends Component {
	constructor(props) {
		super(props);
		this.state = {
			editValue: ''
		};
		this.types = defaultTypes['2.x'];
		this.indexes = defaultIndexType;
	}
	componentWillMount() {
		this.setState({
			editValue: this.props.editValue
		});
		this.props.editCb(this.props.editKey, this.props.editValue);
		this.version = dataOperation.inputState.version && dataOperation.inputState.version.charAt(0) === '5' ? '5.x' : '2.x';
		this.types = defaultTypes[this.version];
	}
	inputHandle() {
		let editValue = this.refs.editInput.value;
		this.setState({
			editValue: editValue
		});
		this.props.editCb(this.props.editKey, editValue);
	}
	getOptions(data, placeholder) {
		let types = data.map((type, i) => {
			return (<option key={i} value={type}>{type}</option>)
		});
		types.unshift(<option key={-1} value=''>{placeholder}</option>);
		return types;
	}
	getanalyzers() {
		let analyzer = this.props.registeredAnalyzers.map((index, i) => {
			return (<option key={i} value={index}>{index}</option>)
		});
		analyzer.unshift(<option key={-1} value=''>select analyzer</option>);
		return analyzer;
	}
	getData(method) {
		let obj = {
			data: [],
			placeholder: ''
		};
		switch(method) {
			case 'type':
				obj.data = this.types;
				obj.placeholder = 'select datatype';
			break;
			case 'index':
				obj.data = this.indexes;
				obj.placeholder = 'select index type';
			break;
			case 'analyzer':
				obj.data = this.props.registeredAnalyzers;
				obj.placeholder = 'select analyzer';
			break;
		}
		return obj;
	}
	inputOptions() {
		let inputSample;
		switch (this.props.editKey) {
			case 'fieldName':
				inputSample = (<input className="form-control" type="text" value={this.state.editValue} ref="editInput" onChange={()=> this.inputHandle()} placeholder={this.props.placeholder} ></input>);
				break;
			case 'type':
			case 'index':
			case 'analyzer':
				let getRelated = this.getData(this.props.editKey);
				inputSample = (
					<select className="form-control" value={this.state.editValue} ref="editInput" onChange={()=> this.inputHandle()} >
						{this.getOptions(getRelated.data, getRelated.placeholder)}
					</select>
				);
				break;
			default:
				inputSample = (<input className="form-control" type="text" value={this.state.editValue} ref="editInput" onChange={()=> this.inputHandle()} placeholder={this.props.placeholder} ></input>);
				break;
		}
		return inputSample;
	}
	render() {
		return (
			<div className={"editableContainer col-xs-12" + (this.props.defaultEdit ? ' on ' : ' off ')}>
				<div className="frontEditable">
					{this.props.editValue}
				</div>
				<div className="backEditable">
					<div className="form-group">
						{this.inputOptions()}
					</div>
				</div>
			</div>
		);
	}
}

@@ -1104,253 +1104,8 @@
 %0A%09%7D%0A
-%09getanalyzers() %7B%0A%09%09let analyzer = this.props.registeredAnalyzers.map((index, i) =%3E %7B%0A%09%09%09return (%3Coption key=%7Bi%7D value=%7Bindex%7D%3E%7Bindex%7D%3C/option%3E)%0A%09%09%7D);%0A%09%09analyzer.unshift(%3Coption key=%7B-1%7D value=''%3Eselect analyzer%3C/option%3E);%0A%09%09return analyzer;%0A%09%7D%0A
 %09get
@@ -1115,24 +1115,24 @@
 a(method) %7B%0A
+
 %09%09let obj = 
@@ -1594,232 +1594,8 @@
 ) %7B%0A
-%09%09%09case 'fieldName':%0A%09%09%09%09inputSample = (%3Cinput className=%22form-control%22 type=%22text%22 value=%7Bthis.state.editValue%7D ref=%22editInput%22 onChange=%7B()=%3E this.inputHandle()%7D placeholder=%7Bthis.props.placeholder%7D %3E%3C/input%3E);%0A%09%09%09%09break;%0A
 %09%09%09c
@@ -1638,24 +1638,26 @@
  'analyzer':
+ %7B
 %0A%09%09%09%09let get
@@ -1938,16 +1938,42 @@
 %09break;%0A
+%09%09%09%7D%0A%09%09%09case 'fieldName':%0A
 %09%09%09defau
@@ -1975,16 +1975,18 @@
 default:
+ %7B
 %0A%09%09%09%09inp
@@ -2170,16 +2170,16 @@
 nput%3E);%0A
-
 %09%09%09%09brea
@@ -2173,32 +2173,37 @@
 t%3E);%0A%09%09%09%09break;%0A
+%09%09%09%7D%0A
 %09%09%7D%0A%09%09return inp

Refactor editable