import React, { Component } from 'react'; // Bei React bzw. Nativ immer importieren!
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View } from 'react-native';

const data = [
    { text: "Zitat1", author: "Author 1" },
    { text: "Zitat2", author: "Author 2" },
    { text: "Zitat3", author: "Author 3" },
    { text: "Zitat4", author: "Author 4" },
    { text: "Zitat5", author: "Author 5" },
];
export default class App extends Component {
    state = { index: 0 }; //initialer Zustand

    // Darstellung der Komponente im UI
    // Render wird automatisch ausgeführt
    // a) Komponente erscheint im Ui (initialer Zustand)
    // b) Zustand ändert sich (state) => this.setstate(...)
    render() {
        let index = this.state.index;
        const quote = data[index];
        let nextIndex = index + 1;
        if (nextIndex === data.length) nextIndex = 0;
        return (
            //JSX
            <View style={styles.container}>
                <Text>{quote.text}</Text>
                <Text>-- {quote.author}</Text>
                <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
                <StatusBar style="auto" />
            </View>
        );
    }
}

//Aussehen und Layout
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});