import React, {Component} from 'react';
import {SplitButton, MenuItem,Input,Button} from 'react-bootstrap';
import {metPreConv,metPrefSymbols} from './utils/metricPrefix';

export default class NumeralInputWithUnitsCompo extends Component {
  constructor(props) {
    super(props);
    let {value, unit,metricPrefix,precision} = props;
    this.state ={
      unit: unit,
      value: value,
      metricPrefix: metricPrefix,
      currentPrecision: precision,
      valueString: metPreConv(value,"none",metricPrefix) || 0,
      showString: false
    };
  }

  componentWillReceiveProps(nextProps) {
    let {value, unit,metricPrefix,precision} = nextProps;
    this.setState({
      unit: unit,
      value: value,
    })
  }

  _handleValueChange(value) {
    this.setState({
      value: value
    }, () => this._onChangeCallback());
  }

  _handleInputValueChange(event) {

    let inputField = event.target;
    let caretPosition = $(inputField).caret();
    let {value} = inputField;
    let {metricPrefix,valueString} = this.state;
    let {onChange} = this.props;
  //  let l = value.length;
    let lastChar =  value[caretPosition-1] || "";
    let md = lastChar.match(/\d/);
    let mc = lastChar.match(/\.|(,)/);
    let comma= parseInt(value)!=value && value.match(/\./)&&value.match(/\./).index;



    if (mc && mc[1]){value = value.slice(0,caretPosition-1)+'.'+value.slice(caretPosition)}
    if (md||mc){
      if(parseFloat(valueString)==value){}
      valueString=value}else{
    }

    this.setState({
        value:  metPreConv(value,metricPrefix,"none"),
        valueString: valueString
      }, () => {
        this._onChangeCallback();
        $(inputField).caret(caretPosition);
      }
    );
  //  onChange({value: unformatedValue,unit: this.state.unit});
  }


  _handleInputValueFocus(event){
     this.setState({
        currentPrecision: undefined,
        showString: true
      }, () => {this._onChangeCallback();}
  );
  }
  _handleInputValueBlur(event){
     this.setState({
        //valueString: value.toPrecision(currentPrecision)
        currentPrecision: this.props.precision,
        showString: false
      }, () => {this._onChangeCallback();}
  );
  }

  _onChangeCallback() {
    if(this.props.onChange) {
      this.props.onChange(this.state);
    }
  }
  togglePrefix(){
    let {metricPrefixes} = this.props
    let ind = metricPrefixes.indexOf(this.state.metricPrefix)
    if (ind < metricPrefixes.length-1) {
      ind +=1;
    } else { ind=0;}
    this.setState({
      metricPrefix: metricPrefixes[ind]
    });
  }

// TODO fix css-issue with wrong z-index
  render() {
    let {units, bsSize, bsStyle, disabled,label, key} = this.props;
    let {unit,showString, value,metricPrefix,currentPrecision,valueString} = this.state;
    let mp = metPrefSymbols[metricPrefix];
    let val = ()=>{
      if (!showString){
        return  metPreConv(value,"none",metricPrefix).toPrecision(currentPrecision);
      }else{return valueString}
    };
    let prefixSwitch =<Button active onClick={() =>{this.togglePrefix()}} bsStyle={bsStyle} bsSize={bsSize}>{mp+unit}</Button>
    return (
      <div >
        <Input  key={key} type='text' disabled={disabled} bsSize={bsSize} bsStyle={bsStyle} label={label}
          value={val()}
          onChange={(event) => this._handleInputValueChange(event)}
          onFocus={(event) => this._handleInputValueFocus(event)}
          onBlur={(event)=>this._handleInputValueBlur(event)}
          buttonAfter={prefixSwitch}
          />
      </div>
    );
  }
}

NumeralInputWithUnitsCompo.defaultProps = {
  value: 0,
  units: []
};

@@ -417,16 +417,26 @@
 icPrefix
+ %7C%7C %22none%22
 ,%0A      
@@ -482,16 +482,23 @@
 eString:
+  0, //
  metPreC
@@ -530,19 +530,16 @@
 efix) %7C%7C
- 0,
 %0A      s
@@ -730,16 +730,17 @@
 ,%0A    %7D)
+;
 %0A  %7D%0A%0A  
@@ -1085,36 +1085,8 @@
 ps;%0A
-  //  let l = value.length;%0A
     
@@ -1209,95 +1209,8 @@
 /);%0A
-    let comma= parseInt(value)!=value && value.match(/%5C./)&&value.match(/%5C./).index;%0A%0A%0A
 %0A   
@@ -1298,16 +1298,17 @@
 ition)%7D%0A
+%0A
     if (
@@ -1319,29 +1319,8 @@
 mc)%7B
-%0A      if(parseFloat(
 valu
@@ -1330,54 +1330,14 @@
 ring
-)=
 =value
-)%7B%7D%0A      valueString=value%7Delse%7B%0A    
 %7D%0A%0A 
@@ -1557,78 +1557,14 @@
  );%0A
-  //  onChange(%7Bvalue: unformatedValue,unit: this.state.unit%7D);
 %0A  %7D%0A%0A
-%0A
   _h
@@ -1588,33 +1588,32 @@
 cus(event)%7B%0A    
- 
 this.setState(%7B%0A
@@ -1608,26 +1608,24 @@
 .setState(%7B%0A
-  
       curren
@@ -1647,18 +1647,16 @@
 efined,%0A
-  
       sh
@@ -1669,16 +1669,102 @@
 ng: true
+,%0A      valueString: metPreConv(this.state.value,%22none%22,this.state.metricPrefix) %7C%7C 0,
 %0A      %7D
@@ -1791,32 +1791,34 @@
 ngeCallback();%7D%0A
+  
   );%0A  %7D%0A  _hand
@@ -1810,16 +1810,17 @@
  );%0A  %7D%0A
+%0A
   _handl
@@ -1868,67 +1868,8 @@
 e(%7B%0A
-        //valueString: value.toPrecision(currentPrecision)%0A
     

fix bug in NumeralInputWithUnitsCompo