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


let NewComment = ({ postid, newComentAdded }) => {
    let [commentContent, setCommentContent] = useState('');
    const navigation = useNavigation();

    return (
        <View style={styles.NewComment}>
            <TextInput
                label="New Comment"
                value={commentContent}
                onChangeText={setCommentContent}
                mode="outlined"
                multiline={true}
                dense={true}
                style={{
                    flex: 8,
                    fontSize: 12,
                }}
            />
            <View style={{
                flex: 2,
                fontSize: 12,
                flexDirection: "column",
                alignItems: "center", // ignore this - we'll come back to it
                justifyContent: "center",
            }}>
                <Button mode="outlined" onPress={() => {
                    if (commentContent.trim() === "") return 0;
                    setCommentContent('');
                    API.newPostComment(postid, commentContent).then((newPost) => {
                        setCommentContent('');
                        if(newComentAdded) newComentAdded(newPost);
                    });
                }}>
                    <AwesomeIcon name="send" />
                </Button>
            </View>
        </View>
    );
}

export default NewComment;

const styles = StyleSheet.create({
    NewComment: {
        margin: 10,
        flexDirection: "row",
        flex: 6
    }
});