import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Accelerometer } from 'expo';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { data: {} };

    Accelerometer.setUpdateInterval(200);
  }

  subscribe() {
    this.subscription = Accelerometer.addListener((result) => {
      this.setState({ data: result });
    });
  }

  render() {
    let { x, y, z } = this.state.data;

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.header_text}>POC 5 - Acelerometro</Text>
          <Button title="listen to acl" onPress={() => this.subscribe()}></Button>
        </View>
        <View>
          <View style={{ position: 'absolute', height: 100, width: 100, backgroundColor: '#000', top: y * -100, left: x * 100 }}>
          </View>
        </View>
      </View >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    alignItems: 'center'
  },
  header: {
    margin: 20
  },
  header_text: {
    fontSize: 24
  },
  input: {
    height: 100
  }
});

function round(n) {
  if (!n) {
    return 0;
  }

  return Math.floor(n * 100) / 100;
}