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

const force0 = 100; // px/ms
const g = 10;
const t = 1000;

class App extends Component {
  state = {
    animationProgress: new Animated.Value(0),
    alpha: 70,
  };

  fadeIn = () => {
    //start animation
    Animated.sequence([
      Animated.timing(this.state.animationProgress, {
        toValue: 1,
        duration: t,
        useNativeDriver: true
      }),
      Animated.timing(this.state.animationProgress, {
        toValue: 1,
        duration: 250,
        useNativeDriver: true
      }),
      Animated.timing(this.state.animationProgress, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true
      }),
    ]).start();
  };

  fadeStop = () => {
    Animated.timing(this.state.animationProgress).stop();
  };


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

      {/*komponent animacyjny*/}

        <Animated.View
          style={[
            styles.fadingContainer,
            {
              transform:
              [{

                translateY: Animated.subtract(0, Animated.multiply(Animated.subtract(force0 * Math.sin(this.state.alpha * Math.PI / 180), Animated.multiply(g, this.state.animationProgress.interpolate({
                                inputRange: [0, 1],
                                outputRange: [0, 10],
                            }))), this.state.animationProgress.interpolate({
                                inputRange: [0, 1],
                                outputRange: [0, 10],
                            }))),

              },
              {translateX: Animated.multiply(force0 * Math.cos(this.state.alpha * Math.PI / 180), this.state.animationProgress.interpolate({
                                inputRange: [0, 1],
                                outputRange: [0, 10],
                            })),},

            ],
            }
          ]}
        >


        </Animated.View>


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

        </View>
        <View>
          <Text>Be nice, give me int</Text>
          <TextInput onChangeText={value => this.setState({ alpha: Number(value) })} value={this.state.alpha}/>
        </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;