import React, { Component } from 'react';
import {
  PanResponder,
  StyleSheet,
  View,
  Text
} from 'react-native';

export default class T7Ej1 extends Component{
  constructor(props){
    super(props);
    this._panResponder = {};
    this._previousLeft = props.x;
    this._previousTop = props.y;
    this._circleStyles = {};
    this.circle = null;

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
    this._circleStyles = {
      style: {
        left: this._previousLeft,
        top: this._previousTop,
        backgroundColor: 'green',
        borderRadius: 80
      }
    };
  }

  componentDidMount = () => {
    this._updateNativeStyles();
  }

  _highlight = () => {
    this._circleStyles.style.backgroundColor = 'blue';
    this._updateNativeStyles();
  }
  _unHighlight = () => {
    this._circleStyles.style.backgroundColor = 'green';
    this._updateNativeStyles();
  }
  _updateNativeStyles = () => {
    this.circle && this.circle.setNativeProps(this._circleStyles);
  }
  _handleStartShouldSetPanResponder = (e, gestureState) => {
    return true;
  }
  _handleMoveShouldSetPanResponder = (e, gestureState) => {
    return true;
  }
  _handlePanResponderGrant = (e, gestureState) => {
    this._highlight();
  }
  _handlePanResponderMove = (e, gestureState) => {
    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
    this._circleStyles.style.top = this._previousTop + gestureState.dy;
    this._updateNativeStyles();
    }
  _handlePanResponderEnd = (e, gestureState) => {
    this._unHighlight();
    this._previousLeft += gestureState.dx;
    this._previousTop += gestureState.dy;
  }

  render() {
    return (
      <View
        ref={(circle) => {
          this.circle = circle;
        }}
        style={styles.circle}
        {...this._panResponder.panHandlers}
      />
    );
  }
}

const styles = StyleSheet.create({
  circle: {
    width: 80,
    height: 80,
    borderRadius: 80,
    position: 'absolute',
    left: 0,
    top: 0,
  },
  container: {
    flex: 1,
    paddingTop: 0,
  },
});