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

import Quote from './js/components/Quote';

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(...)
  // c) probs sich ändern
  render() {
    let index = this.state.index;
    const quote = data[index];
    let nextIndex = index + 1;
    if (nextIndex === data.length) nextIndex = 0;
    let prevIndex = index - 1;
    if (index === 0) prevIndex = data.length - 1;
    return (
      //JSX
      <View style={styles.container}>
        <Quote text={quote.text} author={quote.author} />
        <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
        <Button title="Letztes Zitat" onPress={() => this.setState({ index: prevIndex })} />
        <StatusBar style="auto" />
      </View>
    );
  }
}

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