import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, Button, StyleSheet } from 'react-native';
import API from './../API.js';
import UserName from './UserName.js';
import Media from './Media.js';


let Post = (props) => {

    let toProfileText = props.post.toProfile && props.post.toProfile !== props.post.profileid ? 
        <Text> {">"} <UserName profileid={props.post.toProfile} /></Text> : undefined;

    let cleanContent = props.post.content.replace(/@[A-z]+:.+\w/g, '');
    return (
        <View style={styles.postView}>
            <Text style={styles.userName}>
                <UserName profileid={props.post.profileid} />
                {toProfileText}
            </Text>
            <Text>{cleanContent}</Text>
            <Media content={props.post.content} />
            <View style={{flexDirection: "row", flow: 4, justifyContent: 'space-between'}}>
                <Button title='Like' style={{flow:1}} />
                <Button title='Comment' style={{flow:1}} />
                <Button title='Share' style={{flow:1}} />
                <Button title='Book' style={{flow:1}} />
            </View>
        </View>
    );
}

export default Post;

const styles = StyleSheet.create({
    userName: {
        fontSize: 14,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    postView: {
        margin: 8,
        borderColor: 'gray',
        borderWidth: 1,
        padding: 10
    }
});