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

export default class NewQuote extends Component {
    state = { content: null, author: null } //Inizialer Zustand
    render() {
        const { visible, onSave } = this.props; // Einfachere strukturierung, ansonsten z.b this.probs.onSave
        const { content, author } = this.state;
        return (
            //Neuer Screen
            <Modal
                visible={visible}
                onRequestClose={() => {
                    this.setState({ content: null, author: null });
                    onSave(null, null);
                }} //Wird nur für Android benötigt
                animationType='slide'>
                <View style={styles.container}>
                    <TextInput
                        style={[styles.textInput, { height: 150 }]} //Einzelne Styleelemente im Array festgelegt
                        multiline={true}
                        placeholder='Zitat'
                        onChangeText={text => this.setState({ content: text })} />
                    <Text title='TESTFELD'>
                        {this.state.content}
                    </Text>
                    <TextInput
                        style={styles.textInput}
                        placeholder='Autor/in'
                        onChangeText={text => this.setState({ author: text })} />
                    <View
                        style={styles.saveButton}>
                        <Button
                            title="Save"
                            onPress={() => {
                                this.setState({ content: null, author: null });
                                onSave(content, author);
                            }
                            } />
                    </View>
                </View>
            </Modal>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#eee',
        alignItems: 'center', //FlexBox Layout
        justifyContent: 'center'
    },
    saveButton: {
        position: 'absolute',
        bottom: 5,

    },
    textInput: {
        borderWidth: 1,
        borderColor: 'deepskyblue',
        borderRadius: 4,
        width: '80%', //Breite
        marginBottom: 20, // Abstand
        fontSize: 20, // Schriftgröße
        padding: 10,
        height: 50,
    }
});