import React, { useState } from 'react';
import { Text, ScrollView, FlatList, StyleSheet, View, Share } from 'react-native';
import { Button, Card, Chip } from 'react-native-paper';
import API from '../API.js';
import UserName from './UserName.js';
import Media from './Media.js';
import Comment from "./Comment.js";
import NewComment from './NewComment.js';
import Moment from 'moment';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';
import i18n from "../i18nMessages.js";
import ProfilePhotoCircle from './ProfilePhotoCircle.js';
import ProfileVertical from './ProfileCardVertical.js';


let Post = (props) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    let [post, changePost] = useState(props.post);
    let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
        <ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '').trim();
    let usersStrings = post.content.match(/@[A-z]+:.+\w/g);
    let userIds = [];
    let usersProfileCars = [];
    if(usersStrings){
        usersStrings.forEach((userString)=>{
            userIds.push(userString.split(':')[1]);
            usersProfileCars.push(
                <ProfileVertical profileid={userString.split(':')[1]} skipFollow={true}/>
            );
        });
    }
    let renderPost = (obj) => {
        return <ProfileVertical profileid={obj.item} />
    }
    if(usersProfileCars.length === 0) return <></>
    return (
        <Card style={styles.card}>
            <Card.Content style={{
                padding: 0,
                margin: 0,
                marginBottom: 0
            }}>
                <View>
                    <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
                    <Media content={post.content} />
                    <FlatList data={userIds}
                        horizontal={true}
                        renderItem={renderPost}
                        //keyExtractor={item => item} 
                    />
                </View>
            </Card.Content>
        </Card>
    );
}

export default React.memo(Post);

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