'use strict';

var React = require('react-native');

var {

  StyleSheet,

  PanResponder,

  View,

  Text

} = React;

var CIRCLE_SIZE = 40;

var PanResponderExample = React.createClass({

componentWillMount: function() {

  this._panResponder = PanResponder.create({

  onStartShouldSetPanResponder: ()=>true,

  onMoveShouldSetPanResponder: ()=>true,

  onPanResponderGrant: ()=>{},

  onPanResponderMove: this._handlePanResponderMove,

  onPanResponderRelease: ()=>{},

  onPanResponderTerminate: ()=>{},

  });

  this._previousLeft = 20;

  this._previousTop = 84;

  this._circleStyles = {

  left: this._previousLeft,

  top: this._previousTop,

  };

},

render: function() {

  return (

  <View style={{backgroundColor: '#6495ed',flex: 1}}>

  <View style={[styles.circle,this._circleStyles]}

        {...this._panResponder.panHandlers} />

  <Text style={ styles.bottomText}>

    _previousLeft: {this._previousLeft},

    _previousTop: {this._previousTop},

    left: {this._circleStyles.left},

    top: {this._circleStyles.top}

  </Text>

  </View>

  );

},

_handlePanResponderMove: function(e: Object, gestureState: Object) {

  //**can't apply style left&top

  //this._circleStyles.left = this._previousLeft + gestureState.dx;

  //this._circleStyles.top = this._previousTop + gestureState.dy;

  //**can apply style left&top

  this._circleStyles = {

    left: this._previousLeft + gestureState.dx,

    top: this._previousTop + gestureState.dy

  };

  this.setState();

}

});

var styles = StyleSheet.create({

circle: {

  width: CIRCLE_SIZE,

  height: CIRCLE_SIZE,

  borderRadius: CIRCLE_SIZE / 2,

  backgroundColor: 'blue',

  position: 'absolute'

}

});

module.exports = PanResponderExample;

  this._circleStyles.left = this._previousLeft + gestureState.dx;

  this._circleStyles.top = this._previousTop + gestureState.dy;