import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, StyleSheet } from 'react-native';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
import API from './../API.js';
import UserName from './UserName.js';
import Media from './Media.js';
import Comment from "./Comment";


let Post = ({ post, viewer }) => {
    let [showCommentsB, changeshowCommentsB] = useState(false);
    let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
        <Text> {">"} <UserName profileid={post.toProfile} /></Text> : undefined;
    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
    return (
        <Card style={styles.card}>
            <Card.Content>
                <Text style={styles.userName}>
                    <UserName profileid={post.profileid} />
                    {toProfileText}
                </Text>
                <Text>{cleanContent}</Text>
                <Media content={post.content} />
                
            </Card.Content>
            <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly' }}>
                <Button icon={post.reactions[viewer._id] ? "heart" : "heart-o"} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
                <Button icon="comment-o" style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
                <Button icon="share-square-o" style={{ flow: 1 }} ></Button>
                <Button icon={!post.bookmarks || !post.bookmarks.includes(viewer._id) ? "bookmark-o" : "bookmark"} style={{ flow: 1 }} ></Button>
            </Card.Actions>
                {
                    showCommentsB &&
                    post.comments.map((comment, i) => {
                        return <Comment key={i} comment={comment} />
                    })
                }
        </Card>
    );
}

export default Post;

const styles = StyleSheet.create({
    userName: {
        fontSize: 14,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    card: {
        margin: 8,
        backgroundColor: "#FFFFFF"
    },
    comment:{
        margin: 8,
        marginTop: 0,
        padding: 8
    }
});