/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written and maintained by the Click & Push Development team 
 * <dev@clicknpush.ca>, January 2022
 */

import React, { memo } from "react"
import { View, Text } from "react-native"
import { useAuth } from "../../state/external/auth-provider"
import { useLandmarks } from "../../state/external/landmarks"
import { UserProfile } from "../../state/external/profiles"

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

    const getLandmarkCount = () => {
        return landmarkQuery?.data?.filter(lm => landmarkOwnedByUser(lm)).length
    }

    const getTotalLandmarkRating = () => {
        const userLandmarks = landmarkQuery?.data?.filter(lm => landmarkOwnedByUser(lm))
        if (userLandmarks?.length > 0)
            return userLandmarks?.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>
    )
})