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

const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png?width=200&height=200";

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 + '?width=100&height=100' : DefaultPhoto;
    const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
    const onPress = () => {
        return navigation.navigate('Profile', { profileid })
    }
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={onPress}>
            <Image source={{ uri: photoUrl }} key={photoUrl}
                style={{
                    width: small ? 25 : 35,
                    height: small ? 25 : 35,
                    aspectRatio: 1,
                    borderRadius: 50,
                }} cachePolicy="memory-disk"
            />
            </TouchableOpacity>
            
            <View style={styles.textContainer}>
                <Text style={small ? styles.smallProfileName : styles.profileName} onPress={onPress}>{fullName}</Text>
            </View>
        </View>
    );

}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    avatarContainer: {
        marginRight: 5,
    },
    textContainer: {
        alignItems: 'center',
    },
    profileName: {
        fontSize: 17,
        fontWeight: '500',
    },
    smallProfileName: {
        fontSize: 14,
        fontWeight: '500',
    },
});

export default React.memo(ProfileHeader);