import React, { useState } from "react";
import { StyleSheet, SafeAreaView, Text, TextInput, View } from "react-native";
import { Button} from 'native-base';
import { useTheme } from '@react-navigation/native';

function MakePost({navigation, route}) {
    const { colors } = useTheme();
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');
    const { user, comName } = route.params;

    function postPost(){
        fetch(localhost+'/post', {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "ComName": comName, 
                "username": user,
                "title": title,
                "content": body,
                "likes" : 0,
                "dislikes" : 0
            })
        })
        .then(
            function(response) {
                if (response.status === 200 || response.status === 201) {
                    // Successful POST
                    console.log('good postPost');
                    alert("Successfully created!")
                } else {
                    // Examine the text in the response
                    console.log('issue in postPost. Status code: '+ response.status);
                    alert("Unsuccessful")
                }
            }
        )
        .catch(function(err) {
            console.log('Fetch Error :-S', err);
        });
    }

    function handleSubmit(name){
        postPost();
        navigation.navigate("CommunityContent", {
            user: user,
            comName: name
        });
    }
    function handleCancel(name){
        navigation.navigate("CommunityContent", {
            user: user,
            comName: name
        });
    }
    return (
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>Make a Post:</Text>
            <Text style={ [styles.subtitle, {color: colors.text}] }>Title:</Text>
            <TextInput style={ [styles.input, {color: colors.text}] } onChangeText={(title) => setTitle(title)} />
            <Text style={ [styles.subtitle, {color: colors.text}] }>Body:</Text>
            <TextInput multiline = {true} numberOfLines = {5} style={ [styles.input, {color: colors.text}] } onChangeText={(body) => setBody(body)} />
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.nextButton } onPress={()=>handleSubmit(comName)}>
                    <Text style={ styles.nextText } >Submit</Text>
                </Button>
            </View>
            <View style={{flexDirection: "row"}}>
                <Button style={ styles.nextButton } onPress={()=>handleCancel(comName)}>
                    <Text style={ styles.nextText } >Cancel</Text>
                </Button>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    screen:{
        marginTop: "20%",
        paddingLeft: "5%",
        paddingRight: "5%",
        paddingBottom: "30%",
        marginLeft: "10%",
        marginRight: "10%"
    },
    title: {
        fontSize: 25,
        fontWeight: "bold",
        marginTop: "10%",
        paddingBottom: "20%",
        textAlign:"center"
    },
    subtitle: {
        fontSize: 16,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55'
    },
    input: {
        width: "100%",
        height: 40,
        borderBottomWidth: 1
    },
    nextButton: {
        width: '100%',
        justifyContent: 'center',
        backgroundColor: "#d4911c",
        borderRadius: 10,
        alignItems: "center",
        marginBottom: 10,
        marginTop: 50
    },
    nextText: {
        fontSize: 16,
        fontWeight: "bold",
        color: "white"
    },
});

export default MakePost;