import React, { memo } from "react"
import { View, Text } from "react-native"
import { useLandmarks } from "../../hooks/useLandmarks"
import { UserProfile } from "../../hooks/useProfile"

export const ProfileHeader: React.FC<{profile?: UserProfile}> = memo(({profile}) => {
    const {landmarks} = useLandmarks()

    const getLandmarkCount = () => {
        return landmarks?.filter(lm => lm.user == profile?.id).length
    }

    const getTotalLandmarkRating = () => {
        const userLandmarks = landmarks?.filter(lm => lm.user == profile?.id)
        if (userLandmarks?.length > 0)
            return userLandmarks?.filter(lm => lm.user == profile?.id)?.reduce((prev, current) => {return {rating: prev.rating + current.rating}}).rating
        else 
            return 0
    }

    return (
        <View style={{marginTop: 10, flexDirection: 'row', width: '100%', marginBottom: 20}}>
            <View style={{flexBasis: "50%"}}>
            <Text style={{fontSize: 17, textAlign: 'center'}}>{getLandmarkCount()}</Text>
                <Text style={{textAlign: 'center'}}>Landmarks</Text>
            </View>
            {/* This will be implemented when the social network feature is added
            <View style={{flexBasis: "33%"}}>
                <Text style={{fontSize: 10, textAlign: 'center'}}>Not yet implemented</Text>
                <Text style={{textAlign: 'center'}}>Friends</Text>
            </View> */}
            <View style={{flexBasis: "50%"}}>
                <Text style={{fontSize: 17, textAlign: 'center'}}>{getTotalLandmarkRating()}</Text>
                <Text style={{textAlign: 'center'}}>Rating</Text>
            </View>
        </View>
    )
})