import React, { useState, useEffect } from 'react';
import { Avatar, Card } from 'react-native-paper';
import { View, StyleSheet, Text } from 'react-native';
import API from './../API.js';
import { useNavigation } from '@react-navigation/native';

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

const ProfileHeader = ({ profileid, withName = false, small = false }) => {
    let [profile, setProfile] = useState({});
    const navigation = useNavigation();
    useEffect(() => {
        let subscribed = true;
        let getData = async () => {
            let p = await API.getUserProfile(profileid).catch(() => { return {} });
            if (subscribed)
                setProfile(p);
        }
        getData();
        return () => {
            subscribed = false;
        };
    }, [profileid]);
    let photoUrl = profile.profile && profile.profile.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
    const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
    const onPress = () => {
        return navigation.navigate('Profile', { profileid })
    }
    return (
        <Card style={styles.container}>
            <Card.Content>
                <View style={styles.avatarContainer}>
                    <Avatar.Image size={100} 
                        source={{ uri: photoUrl }} 
                        onPress={onPress} 
                        style={{marginLeft:0}}
                    />
                </View>
                <View style={styles.textContainer}>
                    <Text style={small ? styles.smallProfileName : styles.profileName} 
                        onPress={onPress}>{fullName}
                    </Text>
                </View>
            </Card.Content>
        </Card>
    );

}

const styles = StyleSheet.create({
    container: {
        //flexDirection: 'col',
        width: 150,
    },
    avatarContainer: {
        marginRight: 5,
        alignItems: 'center',
        marginBottom: 10,
    },
    textContainer: {
        alignItems: 'center',
    },
    profileName: {
        fontSize: 12,
        fontWeight: '600',
        textAlign: "center"
    },
    smallProfileName: {
        fontSize: 14,
        fontWeight: '500',
    },
});

export default React.memo(ProfileHeader);