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'; // Eigene Componente
import NewQuote from './js/components/NewQuote';// Eigene Componente


const data = [
  { text: "Lernen ist Erfahrung. Alles andere ist einfach nur Information.", author: "Albert Einstein" },
  { 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, showNewQuoteScreen: false }; //initialer Zustand

  // Eigene Methoden mit unterstrich am Anfang
  _addQuote = () => {
    // NewQuote Ausblenden
    this.setState({ showNewQuoteScreen: false });
  }

  // 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}>
        <View style={styles.buttonNew}>
          <Button
            title="New"
            onPress={() => this.setState({ showNewQuoteScreen: true })}>
          </Button>
        </View>
        <NewQuote
          visible={this.state.showNewQuoteScreen}
          onSave={this._addQuote} />
        <Quote
          text={quote.text}
          author={quote.author} />
        <View style={styles.buttonNext}>
          <Button
            color='grey'
            title="Nächstes Zitat"
            onPress={() => this.setState({ index: nextIndex })} />
        </View>
        <View style={styles.buttonPrev}>
          <Button
            title="Letztes Zitat"
            onPress={() => this.setState({ index: prevIndex })} />
        </View>
        <StatusBar style="auto" />
      </View>
    );
  }
}

//Aussehen und Layout
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F2F0FF',
    alignItems: 'center', //FlexBox Layout
    justifyContent: 'center',
  },
  buttonNext: {
    position: 'absolute',
    bottom: 50,
  },
  buttonPrev: {
    position: 'absolute',
    bottom: 5,
  },
  buttonNew: {
    position: 'absolute',
    right: 0,
    top: 25,
  }
});