import { StyleSheet } from "react-native";
import { View, Text } from "../../../components/Themed";
import React, { useEffect, useState } from "react";
import { Button, Input, Textarea, TextareaInput, VStack } from "@gluestack-ui/themed";
import { InputField } from "@gluestack-ui/themed";
import global from "../../../constants/global";
import Colors from "../../../constants/Colors";
import { createPost } from "../../../components/backend";
import { FeedContext } from "../../../components/feedContext";
import { router } from "expo-router";

export default function PostCreate() {
    const [title, setTitle] = useState('') as any;
    const [description, setDescription] = useState('');
    const descRef = React.useRef(null) as any;
    const [feed, setFeed] = React.useContext(FeedContext) as any;
    const postHeading = [
        "Create a post",
        "What is on your mind today?",
        "Let's not get too crazy",
        "Anything crazy happen?",
        "This will help the community I'm sure",
        "Keeping people safe?",
        "Any crime comments",
        "Latest news?",
        "Spill the tea",
        "Dish the dirt",
        "What's the scoop?",
        "Got a story?",
        "Our lips are sealed",
        "A little bird is telling",
        "I heard on the grapevine..",
        "Don't be shy",
        "We need to know",
        "👀",
        "😝",
        "Keep us posted on latest crime happenings",
        "Noise complaints?",
        "Suspicious activity?",
        "Any updates?",
        "What's the latest?",
        "Let's hear it",
        "Got a tip?",
        "Any leads?",
        "What's the buzz?",
        "I'm shaking in anticipation",
        "Is the sky falling?",
        "Where did I put my magnifying glass",
        "I'm all ears",
        "Looking good today",
        "I wouldn't say that if I were you",
        "Savannah, slow down",
        "I'm on the case... not really",
        "Stay safe guys",
        "🔍",
        "🕵️‍♂️",
        "👮",
        "Where is batman",
        "I'm not a detective",
        "I'm a detective",
        "🦹",
        "🦸",
    ]

    useEffect(() => {
        setTitle(postHeading[Math.floor(Math.random()*postHeading.length)]);
        descRef.current.focus();
    },[])

    return(
        <View style={styles.container}>
            <VStack gap={10}>
                <View style={styles.desc}>
                    <Text numberOfLines={1} adjustsFontSizeToFit style={styles.descriptionText}>{title}</Text>

                    <Input 
                        style={styles.textArea}
                        size='xl'
                        borderColor={Colors.dark.cyan}
                        $focus-borderColor={Colors.dark.redPastelClicked}
                    >
                        <InputField 
                            style={styles.textAreainput}
                            placeholder="Your super cool post text goes here"
                            value={description}
                            onChangeText={(text) => setDescription(text)}
                            ref={descRef}
                            maxLength={400}
                            multiline={true}
                            numberOfLines={10}
                            scrollEnabled={false}
                        />
                    </Input>

                    <Text style={styles.infoText}>More options to come later...{"\n"}😤</Text>
                </View>
            </VStack>

            <Button 
                style={styles.button}
                size='xl'
                bg={Colors.dark.redBright}
                $active-bgColor={Colors.dark.redPastelClicked}
                onPress={() => {
                    if(description.length < 5){
                        console.log("Post too short");
                        return;
                    }

                    createPost(description).then((res) => {
                        console.log("Post created with id: ", res.eid);
                        let temp =res;
                        temp.liked = false;
                        temp.likeCount = 0;
                        temp.isOwner = true;
                        temp.commentCount = 0;
                        
                        if(feed.length > 0){
                            setFeed([temp, ...feed]);
                        }else{
                            setFeed([temp]);
                        }

                        
                        router.back();

                    }).catch((err) => {
                        console.log("Error creating post : ", err);
                    })
                }}
            
            >
                <Text style={styles.buttonText}>Post</Text>
            </Button>

        </View>
    )
}

const styles = StyleSheet.create({
    infoText:{
        color: Colors.dark.text,
        fontSize: 20,
        textAlign: 'center',
        marginTop: 20,
        lineHeight: 35,
    },
    textAreainput:{
        padding: 10,
        color: Colors.dark.text,
        textAlignVertical: 'top',
    },
    input:{

    }, 
    titleField:{
        color: Colors.dark.text
    },
    textArea:{
        width: global.width*0.9,
        height: 200,
        borderRadius: 10,
    },
    buttonText:{
        color: 'white',
        fontSize: 20,
    },
    button:{
        width: global.width*0.9,
        height: 60,
        borderRadius: 10,
        marginTop:global.height*0.28,
    },
    descriptionText:{
        fontSize: 30,
        fontWeight: 'bold',
        marginBottom: 10,
        color: Colors.dark.redBright,
    },
    desc:{
        width: global.width*0.9,
    },
    title:{
        width: global.width*0.9,
    },
    titleText:{
        fontSize: 30,
        fontWeight: 'bold',
        marginBottom: 10,
        color: Colors.dark.redBright,
    },
    container:{
        flex: 1,
        alignItems: 'center',
        height: global.height,
        width: global.width,
    },
})