'use strict';

var React = require('react-native');
var { StyleSheet, Text, View, TextInput, Animated } = React;

var FloatingLabel = React.createClass({
  getInitialState: function() {
    var initialPadding = 9;
    var initialOpacity = 0;

    if (this.props.visible) {
      initialPadding = 5;
      initialOpacity = 1;
    }

    return {
      paddingAnim: new Animated.Value(initialPadding),
      opacityAnim: new Animated.Value(initialOpacity)
    };
  },

  componentWillReceiveProps: function(newProps) {
    Animated.timing(this.state.paddingAnim, {
      toValue: newProps.visible ? 5 : 9,
      duration: 230
    }).start();

    return Animated.timing(this.state.opacityAnim, {
      toValue: newProps.visible ? 1 : 0,
      duration: 230
    }).start();
  },

  render: function() {
    return(
      <Animated.View style={[styles.floatingLabel, {paddingTop: this.state.paddingAnim, opacity: this.state.opacityAnim}]}>
        {this.props.children}
      </Animated.View>
    );
  }
});

var TextFieldHolder = React.createClass({
  getInitialState: function() {
    return {
      marginAnim: new Animated.Value(this.props.withValue ? 10 : 0)
    };
  },

  componentWillReceiveProps: function(newProps) {
    return Animated.timing(this.state.marginAnim, {
      toValue: newProps.withValue ? 10 : 0,
      duration: 230
    }).start();
  },

  render: function() {
    return(
      <Animated.View style={{marginTop: this.state.marginAnim}}>
        {this.props.children}
      </Animated.View>
    );
  }
});

var FloatLabelTextField = React.createClass({
  getInitialState: function() {
    return {
      focussed: false,
      text: this.props.value
    };
  },

  getAdditionalStyle: function(name) {
    if (this.props.style && this.props.style[name])
    {
      return this.props.style[name];
    }

    return {};
  },

  render: function() {
    return(
      <View style={[styles.container, this.getAdditionalStyle('container')]}>
        <View style={[styles.viewContainer, this.getAdditionalStyle('viewContainer')]}>
          <View style={[styles.fieldContainer, this.getAdditionalStyle('fieldContainer')]}>
            <FloatingLabel visible={this.state.text}>
              <Text style={[styles.fieldLabel, 
                            this.getAdditionalStyle('fieldLabel'), 
                            this.labelStyle()]}>{this.placeHolderValue()}</Text>
            </FloatingLabel>
            <TextFieldHolder withValue={this.state.text}>
              <TextInput
                placeholder={this.props.placeholder}
                style={[styles.valueText, this.getAdditionalStyle('valueText')]}
                value={this.state.text}
                onFocus={this.setFocus}
                onBlur={this.unsetFocus}
                onChangeText={this.setText}
                onChange={this.props.onChange}
                secureTextEntry={this.props.secureTextEntry}
                keyboardType={this.props.keyboardType}
                autoCapitalize={this.props.autoCapitalize}
              />
            </TextFieldHolder>
          </View>
        </View>
      </View>
    );
  },
  
  setFocus: function() {
    this.setState({
      focussed: true
    });
    try {
      return this.props.onFocus();
    } catch (_error) {}
  },

  unsetFocus: function() {
    this.setState({
      focussed: false
    });
    try {
      return this.props.onBlur();
    } catch (_error) {}
  },

  labelStyle: function() {
    if (this.state.focussed) {
      return  this.props.style && this.props.style.focussed ? this.props.style.focussed : styles.focussed;
    }
  },

  placeHolderValue: function() {
    if (this.state.text) {
      return this.props.placeholder;
    }
  },

  setText: function(value) {
    this.setState({
      text: value
    });
    try {
      return this.props.onChangeTextValue(value);
    } catch (_error) {}
  },

  withMargin: function() {
    if (this.state.text) {
      return styles.withMargin;
    }
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 45,
    justifyContent: 'center'
  },
  viewContainer: {
    flex: 1,
    flexDirection: 'row'
  },
  floatingLabel: {
    position: 'absolute',
    top: 0,
    left: 0
  },
  fieldLabel: {
    height: 10,
    fontSize: 9,
    color: '#B1B1B1',
    paddingLeft: 15
  },
  fieldContainer: {
    flex: 1,
    justifyContent: 'center',
    position: 'relative',
    borderBottomWidth: 1 / 2,
    borderColor: '#C8C7CC',
    backgroundColor: 'white',
    paddingLeft: 15
  },
  valueText: {
    height: 20,
    fontSize: 16,
    color: '#111111'
  },
  withMargin: {
    marginTop: 10
  },
  focussed: {
    color: "#1482fe"
  }
});

module.exports = FloatLabelTextField;

@@ -1679,16 +1679,173 @@
 ;%0A  %7D,%0A%0A
+  componentWillReceiveProps: function(newProps) %7B%0A    console.log('componentWillReceiveProps');%0A    this.setState(%7B%0A      text: newProps.value%0A    %7D);%0A  %7D,%0A%0A
   getAdd
@@ -2654,16 +2654,78 @@
 xtInput%0A
+                ref=%7BtextInput =%3E this.textInput = textInput%7D%0A
         
@@ -2878,26 +2878,27 @@
 e=%7Bthis.
-state.text
+props.value
 %7D%0A      
@@ -3000,65 +3000,15 @@
 ange
-Text
 =%7Bthis.
-setText%7D%0A                onChange=%7Bthis.props.
 onCh
@@ -3910,24 +3910,63 @@
 on(value) %7B%0A
+    console.log(%60SetText: $%7Bvalue%7D%60);%0A%0A
     this.set
@@ -4003,182 +4003,358 @@
 %7D);%0A
-    try %7B%0A      return this.props.onChangeTextValue(value);%0A    %7D catch (_error
+%0A    this.textInput.refs.input.setNativeProps(value);%0A  %7D,%0A%0A  onChange: function(event
 ) %7B
-%7D
 %0A  
-%7D,%0A%0A  withMargin: function() %7B%0A    if (this.state.text) %7B%0A      return styles.withMargin
+  console.log(%60onChange: $%7Bevent.nativeEvent.text%7D%60);%0A    this.setText(event.nativeEvent.text); %0A%0A    if (this.props.onChangeText) %7B%0A      this.props.onChangeText(event.nativeEvent.text);%0A    %7D%0A%0A    if (this.props.onChange) %7B%0A      this.props.onChange(event)
 ;%0A  
@@ -4990,47 +4990,8 @@
  %7D,%0A
-  withMargin: %7B%0A    marginTop: 10%0A  %7D,%0A
   fo

change settext and value binding to allow easier outside manipulation of value