import React, { useState, useEffect } from 'react';
import { View, Share } 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 }) => {
    const safeProfileObj = profileObj || {};
    const safeProfile = safeProfileObj.profile || {};
    let photoUrl = safeProfile.photo ? 'https://social.emmint.com/' + safeProfile.photo + '?width=1000&height=1000' : DefaultPhoto;
    return (
        <>
            <Card elevation={3}>
                <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} style={{
                    height: 300
                }} />
                <Card.Content style={{}}>
                    <Title style={{ position: "absolute", top: -60, left: 10, backgroundColor: "rgba(255,255,255,0.4)", padding: 10 }}>
                        <UserName profileid={safeProfileObj._id} />
                    </Title>
                    <Paragraph style={{ paddingTop: 10 }}>{safeProfile.description || ""}</Paragraph>
                    <View style={{
                        position: "absolute",
                        top: -290,
                        right: 10,
                        width: 50,
                        height: 50,
                        backgroundColor: "#ddd",
                        borderRadius: 25,
                        opacity: 0.7
                    }}>
                        <FollowButton profile={safeProfileObj} />
                    </View>
                    <View style={{
                        position: "absolute",
                        top: -290,
                        right: 80,
                        width: 50,
                        height: 50,
                        backgroundColor: "#ddd",
                        borderRadius: 25,
                        opacity: 0.7
                    }}>
                        <Button icon="ios-share" labelStyle={{ fontSize: 24, paddingTop:10 }} onPress={() => {
                            Share.share({
                                message: "https://social.emmint.com/feed/" + safeProfileObj._id,
                                title: (safeProfile.firstName || "") + " " + (safeProfile.lastName || "")
                            });
                        }}></Button>
                    </View>
                </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);