import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
import UserName from './UserName';
import FollowButton from './basics/FollowButton';

const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";

const ProfileHeader = ({ profileObj }) => {
    let photoUrl = profileObj.profile && profileObj.profile.photo ? 'https://social.emmint.com/' + profileObj.profile.photo : DefaultPhoto;
    return (
        <>
            <Card elevation={3}>
                <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} />
                <Card.Content>
                    <Title>
                        <UserName profileid={profileObj._id} />
                    </Title>
                    <Paragraph>{profileObj.profile.description}</Paragraph>
                    <FollowButton profile={profileObj} />
                </Card.Content>
            </Card>
            {/*
            <Card.Title
                title={<UserName profileid={profileObj._id} />}
                subtitle={profileObj.profile.description}
                left={(props) => <Avatar.Image {...props} source={{ uri: 'https://social.emmint.com/' + profileObj.profile.photo }} />}
                right={(props) => <IconButton {...props} icon="more-vert" onPress={() => { }} />}
            />
            */}
        </>
    );

}

export default React.memo(ProfileHeader);