import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, StyleSheet } from 'react-native';
import { FAB, Button, Card, Title, IconButton } from 'react-native-paper';
import API from './../API.js';
import UserName from './UserName.js';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';


let Comment = ({ comment, postid }) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    let [likes, changeLikes] = useState(Object.keys(comment.reactions).length);
    const newCommentReaction = () => {
        if (!comment.reactions[viewer._id]) {
            comment.reactions[viewer._id] = { type: "like" };
            changeLikes(likes+1);
            API.newCommentReaction(postid, comment.createdAt);
        } else {
            //API.removePostReaction(viewer._id).then(() => {
            //    delete comment.reactions[viewer._id];
            //    changeLikes(likes-1);
            //});
        }
    }
    return (
        <Card style={styles.comment}>
            <Card.Content>
                <View style={{flexDirection: "row", alignItems: "center", justifyContent: "center"}}>
                    <View style={{flex:8}}>
                        <Text style={styles.userName}>
                            <UserName profileid={comment.profileid} key={comment.profileid} />

                        </Text>
                    </View>
                    <View style={{flex:2}}>
                        <Button
                            icon={comment.reactions[viewer._id] ? "favorite" : "favorite-border"}
                            dense={true}
                            onPress={newCommentReaction}
                        >{likes ? likes : ''}</Button>
                    </View>
                </View>
                <Text style={{fontSize: 16}}>{comment.content}</Text>
            </Card.Content>
        </Card>
    );
}

export default React.memo(Comment);

const styles = StyleSheet.create({
    comment: {
        margin: 8,
        marginTop: 0,
    },
    userName: {
        fontSize: 14,
        fontWeight: 'bold',
        marginBottom: 5,
        fontSize: 16
    },
    likeComment: {
        position: 'absolute',
        margin: 16,
        right: 0,
        top: 0,
    },
});