import React, { Component } from "react";
import { Animated, Text, View, StyleSheet, Button } from "react-native";

const force0 = 10; // px/ms
const alpha = 89 * (Math.PI / 180);
const g = .1;
const t = 2000;

class App extends Component {
  // fadeAnim will be used as the value for opacity. Initial Value: 0
  state = {
    yAnim: new Animated.Value(0),
    xAnim: new Animated.Value(0),
    v: new Animated.Value(force0 * Math.sin(alpha))
  };

  fadeIn = () => {
    // move in x-axis
    const vx = force0 * Math.cos(alpha);
    Animated.timing(this.state.xAnim, {
      toValue: vx * t,
      duration: t,
      useNativeDriver:true,
    }).start();

    // move in y-axis
    Animated.timing(this.state.v, {
      toValue: force0 * Math.sin(alpha) - g/2*t,
      duration: t,
      useNativeDriver: true,
    }).start();
    Animated.timing(this.state.yAnim, {
      toValue: Animated.multiply(this.state.v, t),
      duration: t,
      useNativeDriver: true,
    }).start();
  };

  //funkcja ustawiająca zmianę wartości stanu fadeAnim z bieżącej na 0 w ciągu 5s i startująca tą zmianę
  fadeOut = () => {
    // Will change fadeAnim value to 0 in 5 seconds
    Animated.timing(this.state.xAnim, {
      toValue: -150,
      duration: t,
      useNativeDriver:true,
    }).start();
    Animated.timing(this.state.yAnim, {
      toValue: 0,
      duration: t,
      useNativeDriver:true,
    }).start();
    Animated.timing(this.state.v, { toValue: force0 * Math.sin(alpha), duration: t })
  };

  //funkcja ustawiająca zmianę wartości stanu fadeAnim z bieżącej na 0 w ciągu 5s i startująca tą zmianę
  fadeStop = () => {
    Animated.timing(this.state.xAnim).stop();
    Animated.timing(this.state.yAnim).stop();
  };


  render() {
    return (
      <View style={styles.container}>

      {/*komponent animacyjny*/}
        <Animated.View
          style={[
            styles.fadingContainer,
            {
              transform:
              [{

                translateY: this.state.yAnim.interpolate({
                                inputRange: [0, 300],
                                outputRange: [0, -300],
                                extrapolate: 'clamp'
                            }),
              },
              {translateX:this.state.xAnim.interpolate({
                                inputRange: [-150, 150],
                                outputRange: [-150, 150],
                                extrapolate: 'clamp'
                            }),},

            ],
            }
          ]}
        >


        </Animated.View>

        {/*komponent statyczny*/}
        <View style={styles.buttonRow}>
          <Button title="Fade In" onPress={this.fadeIn} />
          <Button title="Fade Out" onPress={this.fadeOut} />
          <Button title="Fade Stop" onPress={this.fadeStop} />

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  fadingContainer: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: "powderblue",
    opacity: 1,
  },
  fadingText: {
    fontSize: 28,
    textAlign: "center",
    margin: 10
  },
  buttonRow: {
    flexDirection: "row",
    marginVertical: 16
  }
});

export default App;