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

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeName = async (key, value) => {
    try {
        const jsonValue = JSON.stringify(value)
        await AsyncStorage.setItem('Name_'+key, jsonValue)
    } catch (e) {
    }
}

const getName = async (key) => {
    try {
        const value = await AsyncStorage.getItem('Name_'+key)
        if (value !== null) {
            return JSON.parse(value);
        }
    } catch (e) {
        return []
    }
}

let UserName = ({profileid}) => {
    let [profile, setProfile] = useState({});
    const navigation = useNavigation();

    useEffect(async () => {
        let cacheProfile = await getName(profileid);
        if(cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
        let p = await API.getUserProfile(profileid).catch(() => { return {} });
        setProfile(p);
        storeName(profileid, p)
    }, [profileid]);

    const onPress = ()=>{
        return navigation.navigate('Profile', { profileid }) 
    }

    return (
        <Text onPress={onPress}>
            {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
        </Text>
    );
}

export default React.memo(UserName);

const styles = StyleSheet.create({
});