import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput, Button } from 'react-native-paper';
import API from './../API.js';
import { useNavigation } from '@react-navigation/native';


let NewPost = ({profileid, newPostCB}) => {
    let [postContent, setPostContent] = useState('');
    const navigation = useNavigation();

    return (
        <View style={styles.newPost}>
            <TextInput
                label="New Post"
                value={postContent}
                onChangeText={setPostContent}
                mode="outlined"
                multiline={true}
            />
            {
                postContent ? (
                    <View style={{ flexDirection: "row", justifyContent: 'flex-end' }}>
                        <Button icon="add-a-photo" mode="outlined"></Button>
                        <Button icon="send" mode="outlined" onPress={() => {
                            setPostContent('');
                            API.newPost(postContent).then((newPost) => {
                                setPostContent('');
                                if(newPostCB) newPostCB(newPost);
                            });
                        }}>Post</Button>
                    </View>
                ) : undefined
            }

        </View>
    );
}

export default NewPost;

const styles = StyleSheet.create({
    newPost: {
        margin: 10
    }
});