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

export default class TestComponent extends Component {

    constructor(props) {
        super(props);
        this.position = new Animated.ValueXY();
        const panResponder = PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove: (event, gesture) => {
                this.position.setValue({
                    x: gesture.dx,
                    y: gesture.dy,
                })
            },
            onPanResponderRelease: (event, gesture) => {
                this.position.setValue({
                    x: gesture.dx,
                    y: gesture.dy,
                })
            }
        });

        this.state = {
            panResponder
        }
    }

    render() {
        return (
            <View style={styles.topLevel}>
                <Animated.View style={StyleSheet.flatten([styles.board,
                this.position.getLayout()])}
                    {...this.state.panResponder.panHandlers}>
                    <View style={StyleSheet.flatten([styles.whiteCell, {
                        left: 50,
                        top: 50,
                    }])} />
                    <View style={StyleSheet.flatten([styles.blackCell, {
                        left: 150,
                        top: 50,
                    }])} />
                    <View style={StyleSheet.flatten([styles.blackCell, {
                        left: 50,
                        top: 150,
                    }])} />
                    <View style={StyleSheet.flatten([styles.whiteCell, {
                        left: 150,
                        top: 150,
                    }])} />

                    <View style={StyleSheet.flatten([styles.greenCoin, {
                        top: 150,
                        left: 150
                    }])} />

                    <View style={StyleSheet.flatten([styles.redCoin, {
                        top: 50,
                        left: 150
                    }])} />
                </Animated.View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topLevel: {
        backgroundColor: "#CCFFCC",
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    board: {
        width: 300,
        height: 300,
        backgroundColor: "#FFCCFF",
    },
    whiteCell: {
        width: 100,
        height: 100,
        backgroundColor: '#FFAA22',
        position: 'absolute',
    },
    blackCell: {
        width: 100,
        height: 100,
        backgroundColor: '#221122',
        position: 'absolute',
    },
    greenCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#23CC12',
        borderRadius: 50,
    },
    redCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#FF0000',
        borderRadius: 50,
    },
});