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 Media from './Media.js';
import BibleEmbeddedView from './BibleEmbeddedView.js';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';
import Moment from 'moment';
import i18n from "../i18nMessages.js";
import 'moment/min/locales';
Moment.locale(i18n.locale);
import ProfilePhotoCircle from './ProfilePhotoCircle.js';

let Comment = ({ comment, postid }) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    let [likes, changeLikes] = useState(Object.keys(comment.reactions).length);
    let cleanContent = String(comment.content || '');
    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, marginBottom: 8 }}>
                        <ProfilePhotoCircle profileid={comment.profileid} />
                        <Text style={
                            {
                                fontSize: 12,
                                fontWeight: "normal",
                                position: "absolute",
                                top: 20,
                                left: 37,
                            }
                        }> {Moment(comment.createdAt).fromNow()}</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: 14 }}>{cleanContent}</Text>
                <BibleEmbeddedView content={comment.content} compact openChapterOnPress />
                <Media content={comment.content} postId={postid} skiptVideo={true} />
            </Card.Content>
        </Card>
    );
}

export default React.memo(Comment);

const styles = StyleSheet.create({
    comment: {
        margin: 8,
        marginTop: 0,
    },
    likeComment: {
        position: 'absolute',
        margin: 16,
        right: 0,
        top: 0,
    },
});