import { Transitioning, Transition } from 'react-native-reanimated';
import React, { useRef, useEffect, useState } from 'react';
import { Platform, StyleSheet, Text, View, Button } from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const transition1 = (
  <Transition.Sequence>
    <Transition.In
      type="slide-right"
      durationMs={400}
      interpolation="easeOut"
      propagation="top"
    />
  </Transition.Sequence>
);
const transition2 = (
  <Transition.Together>
    <Transition.Change durationMs={400} />
    <Transition.In
      type="slide-right"
      durationMs={400}
      interpolation="easeOut"
      propagation="top"
    />
  </Transition.Together>
);

const App = () => {
  const [extra, setExtra] = useState(0);

  const ref = useRef();
  const ref2 = useRef();

  useEffect(() => {
    ref2.current.animateNextTransition();
  }, []);

  return (
    <View style={styles.container}>
      <Transitioning.View ref={ref} transition={transition2}>
        <Transitioning.View ref={ref2} transition={transition1}>
          <View
            style={{
              backgroundColor: 'lightblue',
              borderRadius: 10,
            }}
          >
            <Text style={styles.welcome}>Welcome to React Native!</Text>
            <Text style={styles.instructions}>To get started, edit App.js</Text>
            <Text style={styles.instructions}>{instructions}</Text>
            {new Array(extra).fill(0).map((_, index) => (
              <View
                key={index}
                style={{
                  backgroundColor: 'lightgray',
                  margin: 3,
                  borderRadius: 10,
                }}
              >
                <Text
                  style={{
                    textAlign: 'center',
                  }}
                >
                  {`View number ${index}`}
                </Text>
              </View>
            ))}
          </View>
        </Transitioning.View>
      </Transitioning.View>
      <View style={{ position: 'absolute', bottom: 100 }}>
        <Button
          title="Boing"
          onPress={() => {
            ref.current.animateNextTransition();
            setExtra(oldExtra => oldExtra + 1);
          }}
        />
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});