import React, { useEffect } from "react";
import { View, Text } from './Themed';
import {StyleSheet, Touchable, KeyboardAvoidingView, Platform, LayoutAnimation, ActivityIndicator} from "react-native";
import global, { userLocation, width } from "../constants/global";
import Colors from "../constants/Colors";
import { getIncidentEmoji } from "../constants/emojis";
import { TouchableOpacity, Keyboard } from "react-native";
import { Badge, BadgeText, get, Icon, Input, InputField, InputSlot, Menu, MenuItem, MenuItemLabel, Pressable, ScrollView, SectionList, set, TrashIcon, VStack } from "@gluestack-ui/themed";
import { Ionicons, MaterialCommunityIcons, Octicons } from "@expo/vector-icons";
import { createComment, deleteComment, deleteEntity, getComments, getCommentsAfter, getEntityCounts, getInitPosts, getUserAlias, getUserComments, hasLiked, likeEntity, unlikeEntity, dislikeEntity, dislikeComment, deleteCommentLike, likeComment, hasLikedComment } from "./backend";
import constants from 'expo-constants'
import { formatnum } from "./postListView";
import { FlatList, RefreshControl } from "react-native-gesture-handler";
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { FeedContext } from "./feedContext";
import { router, useLocalSearchParams, useNavigation } from "expo-router";
import { useSettings } from "./appSettingsContext";
import { UserFeedContext } from "./userFeedContext";

//Loading relative time plugin
dayjs.extend(relativeTime);

export default function Post(){
    const route = useNavigation()

    const post = global.passedPost as any;
    const [comments, setComments] = React.useState<any>([]);
    const [refreshing, setRefreshing] = React.useState(false);
    const [commentPH, setCommentPH] = React.useState("");
    const [userComment, setUserComment] = React.useState("");
    const [feed, setFeed] = route.getState().routes[0].name=="home"? React.useContext(FeedContext) as any: React.useContext(UserFeedContext);
    const feedIndex = feed.findIndex((p:any) => p.eid==post.eid);
    const flRef = React.useRef(null);
    const [menuSelected, setMenuSelected] = React.useState(new Set([]) as any);
    const [hasFetched, setHasFetched] = React.useState(false);
    const settings = useSettings().settings;

    const commentPlaceholder = [
        "Now hold on",
        "I'm listening",
        "Type shi",
        "Spill that tea",
        "The floor is yours",
        "Here is your talking stick",
        "F in the chat",
        "Slay",
        "L ratio",
        "✍️"

    ]
    let emoji = getIncidentEmoji(post.alias, '6', true);
    
    
    //Gets comments
    useEffect(() => {
        if(route.getState().routes.length>0&& route.getState().routes[1].name=="comments"){
            setFeed([post])
            getEntityCounts(post.eid).then((res) => {
                hasLiked(post.eid).then((liked) => {
                    console.log(liked)
                    let t = [post];
                    if (liked.sentiment == "like") {
                        t[0].liked = true
                        t[0].disliked=false
                    }else if(liked.sentiment == "dislike"){
                        t[0].dislike=true
                        t[0].liked=false
                    }
                    t[0].commentCount = res.comments;
                    t[0].likeCount = res.likes;

                    setFeed(t);
                });
            }).catch((err) => {
                console.log("Error getting counts: ", err);
            })
            
        }


        setCommentPH(commentPlaceholder[Math.floor(Math.random()*commentPlaceholder.length)]);
        getComments(post.eid).then((res) => {
            console.log("Got comments: ", res);
            setHasFetched(true);
            setComments([ ...res]);
        }).catch((err) => {
            console.log("Error getting comments: ", err);
        })
        // console.log(feed[feedIndex].isOwner, typeof feed[feedIndex].isOwner);
    }, [])

    //Component for rendering Post header
    const Post = () => {
        const [menuSelected, setMenuSelected] = React.useState(new Set([]) as any);
        //For loading the one post
        return(
            <View style={{backgroundColor:Colors.dark.tabBg}}>
                {/* Header */}
                <View style={styles.header}>
                    {/* Emoji view */}
                    <View style={[styles.emojiContainer, {backgroundColor:Colors.map["class"+emoji[1] as keyof typeof Colors.map]}]}>
                        <Text adjustsFontSizeToFit numberOfLines={1} style={styles.emoji}>{emoji[0]}</Text>
                    </View>
                    {/* User alias with divider */}
                    <View style={styles.headertitlecontainer} >
                        {feed[feedIndex]?.isOwner&& settings.showOP &&<Badge
                            size="sm"
                            variant="outline"
                            backgroundColor={Colors.dark.alertBackground}
                            borderColor={Colors.dark.redPastelClicked}
                            borderRadius={5}
                            width={55}
                        >
                            <BadgeText textAlign="center" width='100%' color={Colors.dark.text}>Yours</BadgeText>
                        </Badge>}

                        <Text adjustsFontSizeToFit numberOfLines={1} style={styles.title}>{post.alias}</Text>
                    </View>
                
                    <Menu
                        placement="bottom"
                        selectedKeys={menuSelected}
                        shadowColor="transparent"
                        selectionMode="single"
                        closeOnSelect={true}
                        maxWidth={global.width*0.3}
                        backgroundColor={Colors.dark.background}

                        onSelectionChange={(keys) => {
                            setMenuSelected(keys)
                            //@ts-ignore
                            switch (keys.currentKey){
                                case "Report":
                                    console.log("Report clicked");
                                    break;
                                case "Delete":
                                    deleteEntity(post.eid).then((res) => {
                                        router.back();
                                        console.log("Deleted post: ", res);
                                        let t = [...feed];
                                        t = t.filter((p:any) => p.eid!=post.eid);
                                        setFeed(t);

                                    }).catch((err) => {
                                        console.log("Error deleting post: ", err);
                                    })
                                    break;
                                default:
                                    console.log("Default clicked");
                            }
                        }}

                        trigger={({ ...triggerProps }) => {
                            return (
                            <Pressable
                                {...triggerProps}
                                style={[styles.menu, {backgroundColor:Colors.dark.tabBg, marginLeft:'auto'}]}
                                >
                                    <MaterialCommunityIcons style={styles.menuIcon} name="dots-vertical" size={24} color={Colors.dark.text} />
                                </Pressable>
                            )
                        }}

                    >
                        {feed[feedIndex]&&!feed[feedIndex].isOwner&&<MenuItem key="Report" textValue="Report" $active-bgColor={Colors.dark.backgroundModal} >
                            <MaterialCommunityIcons name="flag" size={24} color={Colors.dark.redBright} />
                            <MenuItemLabel size="sm" color={Colors.dark.text}>Report</MenuItemLabel>
                        </MenuItem>}
                        {feed[feedIndex]&&feed[feedIndex].isOwner&&<MenuItem key="Delete" textValue="Delete" $active-bgColor={Colors.dark.backgroundModal} >
                            <MaterialCommunityIcons name="delete" size={24} color={Colors.dark.redBright} />
                            <MenuItemLabel size="sm" color={Colors.dark.text}>Delete</MenuItemLabel>
                        </MenuItem>}
                    </Menu>
                
                </View>
                {/* Main text body */}
                <View style={styles.content}>
                    <Text adjustsFontSizeToFit minimumFontScale={0.6} style={styles.body}>{post.body}</Text>
                </View>

                {/* Footer */}
                <View style={styles.footer}>
                    {/* Time */}
                    <View style={styles.time}>
                        <Text adjustsFontSizeToFit numberOfLines={1} style={[styles.footerText, styles.timetext]}>{new Date(post.created_at).toLocaleTimeString()}</Text>
                        <Text adjustsFontSizeToFit numberOfLines={1} style={[styles.footerText, styles.timetext]}>{new Date(post.created_at).toLocaleDateString()}</Text>
                    </View>

                    {/* Comments icon*/}
                    <View style={styles.iconcontainer}>
                        <MaterialCommunityIcons name="comment" size={33} color={Colors.dark.text} style={styles.commenticon} />
                        <Text adjustsFontSizeToFit numberOfLines={1} style={[styles.footerText, styles.icontext, {marginLeft:10}]}>{formatnum(feed[feedIndex]?.commentCount)}</Text>
                    </View>

                    {/* Likes */}
                    <View style={[styles.iconcontainer]}>
                        {!feed[feedIndex]?.isOwner && <TouchableOpacity 
                        style={[styles.iconcontainer]}
                        activeOpacity={0.7}
                        disabled={feed[feedIndex]?.isOwner}
                        onPress={()=>{
                            let tf = [...feed];
                            tf[feedIndex].disliked = !tf[feedIndex].disliked;
                            setFeed(tf);

                            if(tf[feedIndex].disliked){
                                let t = [...feed];
                                if(tf[feedIndex].liked){
                                    t[feedIndex].likeCount = t[feedIndex].likeCount-2;
                                }else{
                                    t[feedIndex].likeCount = t[feedIndex].likeCount-1;
                                }
                                t[feedIndex].liked = false;
                                setFeed(t);

                                dislikeEntity(post.eid).catch((err) => {
                                    let t = [...feed];
                                    if(tf[feedIndex].liked){
                                        t[feedIndex].likeCount = t[feedIndex].likeCount+2;
                                    } else{
                                        t[feedIndex].likeCount = t[feedIndex].likeCount+1;
                                    }
                                    t[feedIndex].disliked = true;
                                    setFeed(t);

                                    console.log("Error disliking post: ", err);
                                })
                            }else{
                                let t = [...feed];
                                t[feedIndex].likeCount = t[feedIndex].likeCount+1;
                                setFeed(t);

                                unlikeEntity(post.eid).catch((err) => {
                                    let t = [...feed];
                                    t[feedIndex].likeCount = t[feedIndex].likeCount-1;
                                    t[feedIndex].disliked = true;
                                    setFeed(t);

                                    console.log("Error unliking post: ", err);
                                })
                            }

                        }}
                    >
                        {!feed[feedIndex]?.disliked &&!feed[feedIndex]?.isOwner && <MaterialCommunityIcons name="chevron-down-box-outline" size={33} color={Colors.dark.redBright} style={styles.likeicon} />}
                        {feed[feedIndex]?.disliked &&!feed[feedIndex]?.isOwner && <MaterialCommunityIcons name="chevron-down-box" size={33} color={Colors.dark.redBright} style={styles.likeicon} />}
                    </TouchableOpacity>}
                    
                    {feed[feedIndex]?.isOwner && <Ionicons name="chevron-expand-sharp" size={33} color={Colors.dark.redBright} style={styles.likeicon} />}
                    <Text adjustsFontSizeToFit numberOfLines={1} style={[styles.footerText, styles.icontext]}>{formatnum(feed[feedIndex]?.likeCount)}</Text>

                    {!feed[feedIndex]?.isOwner && <TouchableOpacity
                        style={[styles.iconcontainer]}
                        activeOpacity={0.7}
                        onPress={()=>{
                            let tf = [...feed];
                            tf[feedIndex].liked = !tf[feedIndex].liked;
                            setFeed(tf);

                            if(tf[feedIndex].liked){
                                let t = [...feed];
                                if(tf[feedIndex].disliked){
                                    t[feedIndex].likeCount = t[feedIndex].likeCount+2;
                                }else{
                                    t[feedIndex].likeCount = t[feedIndex].likeCount+1;
                                }
                                t[feedIndex].disliked = false;
                                setFeed(t);

                                likeEntity(post.eid).catch((err) => {
                                    let t = [...feed];

                                    if(tf[feedIndex].disliked){
                                        t[feedIndex].likeCount = t[feedIndex].likeCount-2;
                                    }else{
                                        t[feedIndex].likeCount = t[feedIndex].likeCount-1;
                                    }
                                    t[feedIndex].liked = false;
                                    setFeed(t);
                                    console.log("Error liking post: ", err);
                                
                                })
                            }else{
                                let t = [...feed];
                                t[feedIndex].likeCount = t[feedIndex].likeCount-1;
                                setFeed(t);

                                unlikeEntity(post.eid).catch((err) => {
                                    let t = [...feed];
                                    t[feedIndex].likeCount = t[feedIndex].likeCount+1;
                                    t[feedIndex].liked = true;
                                    setFeed(t);

                                    console.log("Error unliking post: ", err);
                                })
                            }

                        }}
                    >

                        {!feed[feedIndex]?.liked &&!feed[feedIndex]?.isOwner && <MaterialCommunityIcons name="chevron-up-box-outline" size={33} color={Colors.dark.redBright} style={styles.likeicon} />}
                        {feed[feedIndex]?.liked &&!feed[feedIndex]?.isOwner && <MaterialCommunityIcons name="chevron-up-box" size={33} color={Colors.dark.redBright} style={styles.likeicon} />}
                    </TouchableOpacity>}
                    
                    </View>

                </View>
                <View style={[styles.separator, styles.postDivide]} />
                <View style={styles.commentHeader}>
                    <Text style={styles.commentHeader}>Comments </Text>
                </View>
                <View style={[styles.separator, styles.postDivide, {height:1}]}/>
            </View>
        )
    }

    const RenderComment = ({item}:any) => {
        const [commentLiked, setCommentLiked] = React.useState(false);
        const [commentDisliked, setCommentDisliked] = React.useState(false);
        // Sets the emoji for the comment
        const commentEmoji = getIncidentEmoji(item.alias, '6', true);


        // Sets the comment liked state
        useEffect(()=>{
            hasLikedComment(item.id).then((res) => {
                switch(res.sentiment){
                    case "like":
                        setCommentLiked(true);
                        break;
                    case "dislike":
                        setCommentDisliked(true);
                        break;
                    default:
                        setCommentLiked(false);
                        setCommentDisliked(false);
                }
            })
        },[])

        return(
            <View style={styles.commentContentContainer}>
                {/* Comment header */}
                <View style={styles.commentContentHeader}>
                    {/* Emoji avatar */}
                    <View style={[styles.emojiContainer,{backgroundColor:Colors.map["class"+commentEmoji[1] as keyof typeof Colors.map]}, styles.commentAvatar]}>
                        <Text adjustsFontSizeToFit numberOfLines={1} style={styles.emoji}>{commentEmoji[0]}</Text>
                    </View>

                    <VStack style={styles.commentTitleHeader}>
                            {item.isOP && settings.showOP&&<Badge size="md" borderRadius={"$lg"}backgroundColor={Colors.dark.alertBackground}action="info" width={'15%'}>
                                <BadgeText color={Colors.dark.redBright} fontWeight={"$bold"}>OP</BadgeText>
                            </Badge>}

                        <Text adjustsFontSizeToFit numberOfLines={item.isOP?1:2} style={styles.commentTitle}>{item.alias}</Text>
                    </VStack>

                    <Menu
                        placement="bottom right"
                        selectionMode="single"
                        shadowColor="transparent"
                        maxWidth={global.width*0.3}
                        backgroundColor={Colors.dark.tabBg}
                        selectedKeys={menuSelected}
                        onSelectionChange={(keys) => {
                            setMenuSelected(keys)
                            //@ts-ignore
                            switch (keys.currentKey){
                                case "Report":
                                    console.log("Report clicked");
                                    break;
                                case "Delete":
                                    deleteComment(item.id).then((res) => {
                                        console.log("Deleted comment: ", res);
                                        let t = [...comments];
                                        t = t.filter((c:any) => c.id!=item.id);
                                        setComments(t);

                                        let f = [...feed];
                                        f[feedIndex].commentCount = f[feedIndex].commentCount-1;
                                        setFeed(f);
                                    }).catch((err) => {
                                        console.log("Error deleting comment: ", err);
                                    })
                                    break;
                                default:
                                    console.log("Default clicked");
                            }
                        }}
                        closeOnSelect={true}
                        trigger={({ ...triggerProps }) => {
                            return (
                            <Pressable
                                {...triggerProps}
                                style={styles.menu}
                                >
                                    <MaterialCommunityIcons style={styles.menuIcon} name="dots-vertical" size={24} color={Colors.dark.text} />
                                </Pressable>
                            )
                        }}
                    >
                        {!item.ownsComment&&<MenuItem key="Report" textValue="Report" $active-bgColor={Colors.dark.backgroundModal} >
                            <MaterialCommunityIcons name="flag" size={24} color={Colors.dark.redBright} />
                            <MenuItemLabel size="sm" color={Colors.dark.text}>Report</MenuItemLabel>
                        </MenuItem>}
                        {item.ownsComment&&<MenuItem key="Delete" textValue="Delete" $active-bgColor={Colors.dark.backgroundModal} >
                            <MaterialCommunityIcons name="delete" size={24} color={Colors.dark.redBright} />
                            <MenuItemLabel size="sm" color={Colors.dark.text}>Delete</MenuItemLabel>
                        </MenuItem>}
                    </Menu>
                        
                </View>
                
                <Text style={styles.commentText}>{item.body}</Text>
                
                {/* Comment Icons */}
                <View style={styles.commentFooter}>
                    {/* Comment timestamp */}
                    <Text style={styles.commentTime}>{dayjs(item.created_at).fromNow()}</Text>

                    {/* Like buttons */}
                    <View style={styles.voteContainer}>

                        {item.ownsComment&&<Ionicons name="chevron-expand-sharp" size={25} color={Colors.dark.redBright} style={styles.likeicon} />}
                        {!item.ownsComment&&<TouchableOpacity
                            style={styles.commentLikeButton}
                            onPress={()=>{
                                if(commentLiked){
                                    setCommentLiked(false);
                                    item.likes = item.likes-2;
                                    dislikeComment(item.id).catch((err) => {
                                        console.log("Error disliking comment: ", err);
                                        item.likes = item.likes+2;
                                        setCommentLiked(true);
                                    })
                                }else if(commentDisliked){
                                    item.likes = item.likes+1;
                                    deleteCommentLike(item.id).catch((err) => {
                                        console.log("Error deleting comment like: ", err);
                                        item.likes = item.likes-1;
                                        setCommentDisliked(true);
                                    })
                                }else{
                                    item.likes = item.likes-1;
                                    dislikeComment(item.id).catch((err) => {
                                        console.log("Error disliking comment: ", err);
                                        item.likes = item.likes+1;
                                        setCommentDisliked(true);
                                    })
                                }
                                setCommentDisliked(!commentDisliked);
                            }}
                        >
                            {!commentDisliked&&<MaterialCommunityIcons name="chevron-down-box-outline" size={25} color={Colors.dark.redBright} style={styles.likeicon} />}
                            {commentDisliked&&<MaterialCommunityIcons name="chevron-down-box" size={25} color={Colors.dark.redBright} style={styles.likeicon} />}
                        </TouchableOpacity>}

                        <Text style={styles.voteNumber}>
                            {formatnum(item.likes)}
                        </Text>

                        {!item.ownsComment&&<TouchableOpacity
                            style={styles.commentLikeButton}
                            onPress={()=>{
                                if(commentDisliked){
                                    setCommentDisliked(false);
                                    item.likes = item.likes+2;
                                    likeComment(item.id).catch((err) => {
                                        console.log("Error liking comment: ", err);
                                        item.likes = item.likes-2;
                                        setCommentDisliked(true);
                                    })
                                }else if(commentLiked){
                                    item.likes = item.likes-1;
                                    deleteCommentLike(item.id).catch((err) => {
                                        console.log("Error deleting comment like: ", err);
                                        item.likes = item.likes+1;
                                        setCommentLiked(true);
                                    })
                                }else{
                                    item.likes = item.likes+1;
                                    likeComment(item.id).catch((err) => {
                                        console.log("Error liking comment: ", err);
                                        item.likes = item.likes-1;
                                        setCommentLiked(true);
                                    })
                                }
                                setCommentLiked(!commentLiked);
                            }}
                            >
                            {!commentLiked&&<MaterialCommunityIcons name="chevron-up-box-outline" size={25} color={Colors.dark.redBright} style={styles.likeicon} />}
                            {commentLiked&&<MaterialCommunityIcons name="chevron-up-box" size={25} color={Colors.dark.redBright} style={styles.likeicon} />}
                        </TouchableOpacity>}
                    </View>
                    {/* Comment text */}
                </View>

            </View>
        )
    }

    const renderFooter = () => {
        if(comments.length>10){
            return(
                <Text style={[styles.body, {fontSize:15}]}>Congrats, you made it to the bottom!</Text>
            )
        }
    }

    const renderEmpty = () => {
        return(
            <View>
                {hasFetched&&<View style={{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:Colors.dark.tabBg}}>
                    <Text style={styles.noComment}>No comments yet.  😔</Text>
                </View>}

                {!hasFetched&&<View style={{flex:1, justifyContent:'center', alignItems:'center', backgroundColor:Colors.dark.tabBg}}>
                    <ActivityIndicator size="large" color={Colors.dark.cyan} />
                    <Text style={styles.noComment}>Loading comments...</Text>
                </View>}
            </View>
        )
    }

    return(
        
        <View
            style={[styles.root]}
        >

        <FlatList
            style={styles.wrapper}
            data={comments}
            ref={flRef}
            
            renderItem={({item}) => (
                <RenderComment item={item} />
            )}
            
            ListHeaderComponent={Post}
            ListFooterComponent={renderFooter}
            ListFooterComponentStyle={{marginBottom: 10}}
            ListEmptyComponent={renderEmpty}

            onEndReachedThreshold={0.1}
            onEndReached={()=>{
                console.log("End reached");

                setRefreshing(true);
                // If there are less than 10 comments, don't bother, there is nothing to load
                //Of course unless there is an even where a user has deleted a comment
                if(comments.length<10){
                    setRefreshing(false);
                    return;
                }

                getCommentsAfter(post.eid, comments[0].id as any).then((res) => {
                    console.log("Got comments after: ", res);
                    setComments([...res,...comments]);
                    setRefreshing(false);
                }).catch((err) => {
                    console.log("Error getting comments after: ", err);
                    setRefreshing(false);
                })
            }}

            refreshControl={
                <RefreshControl
                colors={[Colors.dark.cyan, Colors.dark.redBright]}
                progressBackgroundColor={Colors.dark.backgroundProfile}
                refreshing={refreshing}
                onRefresh={()=>{
                    if(comments.length==0){
                        getComments(post.eid).then((res) => {
                            setComments(res);
                        }).catch((err) => {
                            console.log("Error getting comments: ", err);
                        })

                        getEntityCounts(post.eid).then((res) => {
                            
                            let t = [...feed];
                            t[feedIndex].commentCount = res.comments;
                            t[feedIndex].likeCount = res.likes;
                            setFeed(t)
                        }).catch((err) => {
                            console.log("Error getting counts: ", err);
                        })
                        return;
                    }


                    getCommentsAfter(post.eid, comments[0].id as any).then((res) => {
                        console.log("Got comments after: ", res);
                        setComments([...comments, ...res]);
                    }).catch((err) => {
                        console.log("Error getting comments after: ", err);
                    })

                    getEntityCounts(post.eid).then((res) => {
                        console.log("Got counts: ", res);
                        let t = [...feed];
                        t[feedIndex].likeCount = res.likes;
                        t[feedIndex].commentCount = res.comments;
                        setFeed(t);
                    }).catch((err) => {
                        console.log("Error getting counts: ", err);
                    })
                }}

                />
            }

            />


            {/* Create comment bar */}
            <KeyboardAvoidingView
                style={styles.commentContainer}   
            >
                <Input
                    variant="rounded"
                    size="xl"
                    $focus-borderColor={Colors.dark.redBright}
                    borderColor={Colors.dark.cyan}
                    style={[styles.commentInput]}
                    sx={{_input:{color:Colors.dark.text}}}

                >
                    <InputField 
                        placeholder={commentPH}
                        value={userComment}
                        // marginBottom={-30}
                        // padding={25}
                        paddingBottom={25}
                        marginBottom={-25}
                        onChangeText={(text) => {setUserComment(text)}}
                    />

                    <InputSlot style={styles.sendButtonIcon}>
                        <TouchableOpacity
                            onPress={()=>{
                                Keyboard.dismiss();

                                createComment(post.eid, userComment).then((res) => {
                                    console.log("Created comment: ", res);

                                    //Adds OP field is the user is the OP
                                    if(post.isOwner){
                                        res.isOP = true;
                                    }else{
                                        res.isOP = false;
                                    }

                                    res.ownsComment = true;

                                    setComments([...comments, res]);
                                    setUserComment("");

                                    let t = [...feed];
                                    t[feedIndex].commentCount = t[feedIndex].commentCount+1;
                                    setFeed(t)
                                    //@ts-ignore
                                    flRef.current?.scrollToEnd({animated:true});
                                }).catch((err) => {
                                    console.log("Error creating comment: ", err);
                                })


                            }}
                        >
                            <MaterialCommunityIcons name="send" size={25} color={Colors.dark.cyan} />
                        </TouchableOpacity>
                    </InputSlot>

                </Input>
            </KeyboardAvoidingView>
        </View>
    )
}




const styles = StyleSheet.create({
    noComment:{
        fontSize: 20,
        color: Colors.dark.text,
        textAlign: 'center',
        marginTop: 10,
        alignSelf: 'center',
        width: global.width*.6,
        marginBottom: global.height*.1,

    },
    // commentHeaderIcons:{
    //     flexDirection: 'column',
    //     backgroundColor: Colors.dark.background,
    //     columnGap: 10,
    //     justifyContent: 'space-between',
    //     // position: 'absolute',
    //     width:'10%',
    //     height: global.height*0.1,
    //     zIndex: 10,
    // },
    commentText:{
        fontSize: 18,
        color: Colors.dark.text,
        backgroundColor: Colors.dark.background,
        marginLeft: global.height*0.095,
        marginRight: 10,
        width: '68%',
    },
    commentFooter:{
        flexDirection:'row',
        width:'100%',
        marginTop: 10,
    },
    voteContainer:{
        flexDirection: 'row',
        width: '20%',
        height: '100%',
        justifyContent: 'space-evenly',
        backgroundColor: Colors.dark.background,
        marginLeft: 'auto',
        alignSelf:'flex-end'
    },
    voteNumber:{
        textAlign:'center',
        fontWeight: 'bold',
        fontSize:18,
    },
    commentTime:{
        fontSize: 12,
        color: Colors.dark.text,
        alignSelf: 'flex-start',
        backgroundColor: Colors.dark.background,
        marginLeft:10,
        height: '100%',
        textAlignVertical: 'center',
    },
    commentLikeButton:{
        alignSelf: 'flex-end',
        justifyContent: 'space-evenly',
        alignContent:'space-evenly',
        // backgroundColor:'red'
    },
    commentTitle:{
        fontSize: 20,
        fontWeight: 'bold',
        color: Colors.dark.cyan,
        alignSelf: 'center',
        width: '100%',
        textAlign: 'left',
    },
    commentTitleHeader:{
        alignSelf: 'center',
        width: '70%',
        maxHeight: global.height*0.07,
    },
    commentContentHeader:{
        flexDirection: 'row',
        backgroundColor: Colors.dark.background,
        padding: 10,
        columnGap: 10,
        justifyContent:'center',
    },
    commentContentContainer:{
        flex:1,
        flexDirection: 'column',
        width: global.width*0.95,
        backgroundColor: Colors.dark.background,
        minHeight: global.height*0.15,
        alignSelf: 'center',
        borderRadius: 10,
        padding:5,
        marginBottom: 15,
        paddingBottom:10,
        paddingRight: 10,
    },
    commentAvatar:{
        alignSelf: 'flex-end',
        width: global.height*0.07,
        height: global.height*0.07,
        borderWidth:3,
    },
    root:{
        flex:1,
        height: global.height,
        width: global.width,
        // paddingBottom:70,
        backgroundColor: Colors.dark.tabBg,
    },
    sendButtonIcon:{
        marginRight: 10,
    },
    commentInput:{
        width: global.width*0.95,
        alignSelf: 'center',
    },
    commentContainer:{
        flex:1,
        position: 'static',
        width: global.width,
        maxHeight: 115,
        zIndex: 10,
        backgroundColor: Colors.dark.tabBg,
        marginBottom: 10,
        
    },
    commentHeader:{
        paddingHorizontal:5,
        paddingVertical:2,
        flexDirection: 'row',
        backgroundColor: Colors.dark.tabBg,
    },
    wrapper:{
        // height: global.height,
        width: global.width,
        backgroundColor: Colors.dark.tabBg,
        padding:0,
        flex:1,
        paddingTop:5,
    },
    content:{
        backgroundColor: Colors.dark.tabBg,
        flexDirection: 'column',
        width:global.width,
        minHeight: global.height*0.08,
        flex:1,
        overflow: 'hidden',
        padding:1,
        marginBottom: 10,
    },
    header:{
        backgroundColor: Colors.dark.tabBg,
        flexDirection: 'row',
        width: global.width,
        columnGap: 5,
        padding: 10,
        flex:1,
        marginTop:0,
        paddingTop:0,

    },
    headerDivide:{
        width: '90%',
    },
    title:{
        fontSize: 30,
        fontWeight: 'bold',
        color: Colors.dark.cyan,
        backgroundColor: Colors.dark.tabBg,
        textAlignVertical:'bottom',
        width:'70%'
    },
    emojiContainer:{
        justifyContent: 'center',
        alignItems: 'center',
        height: global.height*.08,
        width: global.height*.08,
        borderWidth:3,
        borderColor:Colors.dark.backgroundProfile,
        borderRadius: 10,
        // alignSelf:"flex-start",
    },
    emoji:{
        fontSize: 50,
    },
    separator: {
        height: 2,
        width: '80%',
        alignSelf: "flex-start",
        justifyContent: 'flex-start',
        marginBottom:5,
        backgroundColor: Colors.dark.darkText,
        borderRadius: 10,
    },
    footerdivide:{
        alignSelf: 'center',
        height:1,
        backgroundColor: Colors.dark.darkText,
    },
    body:{
        fontSize: 20,
        fontWeight: 'bold',
        color: Colors.dark.text,
        textAlign: 'center',
        backgroundColor: Colors.dark.tabBg,
        width:global.width*0.9*0.88,
        alignSelf:'center',
        textAlignVertical:'center',
    },
    footer:{
        backgroundColor: Colors.dark.tabBg,
        width: width*0.9,
        height: '20%',
        bottom:0,
        left:0,
        flexDirection: 'row',
        paddingBottom:0,
        flex:1,
        justifyContent: 'space-between',
        paddingHorizontal: 10,
        alignSelf: 'center',
    },
    footerText:{
        fontSize: 12,
        fontWeight: 'bold',
        color: Colors.dark.text,
        // textAlign: 'left',
        alignSelf:'flex-start',
        backgroundColor: Colors.dark.tabBg,
        textAlignVertical:'bottom',
    },
    time:{
        flexDirection: 'column',
        rowGap: 2,
        width: '20%',
        height: '100%',
        justifyContent: 'center',
        backgroundColor: Colors.dark.tabBg,
        marginBottom: 10,
    },
    timetext:{
        textAlign:'center',
        justifyContent:'center',
        alignSelf:'center',

    },
    likeicon:{
        alignSelf:'center',

    },
    commenticon:{
        alignSelf:'center',
        transform: 'scaleX(-1)',
    },
    iconcontainer:{
        flex:1,
        flexDirection: 'row',
        width: '27%',
        height: '100%',
        justifyContent: 'center',
        backgroundColor: Colors.dark.tabBg,
    },
    icontext:{
        fontSize: 20,
        textAlign:'center',
        alignSelf:'center',
        justifyContent:'center',
    },
    postDivide:{
        marginTop: 10,
        width: global.width*0.98,
        backgroundColor: Colors.dark.darkText,
        height: 1,
        alignSelf: 'center',
    },
    menu:{
        backgroundColor: Colors.dark.background,
        justifyContent: 'center',
    },
    menuIcon:{
        width:'100%',
    },
    headertitlecontainer:{
            flexDirection: 'column',
            width: global.width*0.9-global.height*.1-global.width*0.08,
            backgroundColor: Colors.dark.tabBg,
            height: global.height*.08,
            justifyContent: 'center',
        },

})