import React, { Component } from 'react'
import { View, PanResponder, GestureResponderEvent } from 'react-native'
import Svg, {
  Circle,
  Ellipse,
  G,
  LinearGradient,
  RadialGradient,
  Line,
  Path,
  Polygon,
  Polyline,
  Rect,
  Symbol,
  Use,
  Defs,
  Stop
} from 'react-native-svg';



export default class Foo extends Component {

  panResponder = null;

  constructor(props) {
    super(props)
    this.state = { x: 200, y: 200, initX: 0, initY: 0 }

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: () => {

      },

      onPanResponderStart: (evt, gestureState) => {
        console.log("start", gestureState);
        this.setState({ initX: this.state.x, initY: this.state.y });
      },

      onPanResponderMove: (evt, gs) => {
        //console.log(gs.dx + ' ' + gs.dy)

        const newX = this.state.initX + gs.dx;
        const newY = this.state.initY + gs.dy;

        this.setState({ x: newX, y: newY });
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,

      onPanResponderRelease: (evt, gs) => {
        console.log('Release ' + gs.dx + ' ' + gs.dy);
        //this.setState({ x: this.state.x, y: 0 });
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming
        // the JS responder. Returns true by default. Is currently only supported on
        // android.
        return true;
      },
    })
  }

  componentDidMount() {

  }

  render() {

    return (
      <Svg height="500" width="500">
        <Circle
          {...this.panResponder.panHandlers}
          x={this.state.x}
          y={this.state.y}
          cx="50"
          cy="50"
          r="20"
          stroke="blue"
          strokeWidth="3.5"
          fill="white" />
      </Svg>
    )
  }
}