import React, { useState, useEffect } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
import API from './../API.js';
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import FollowButton from './basics/FollowButton.js';
import ProfilePhotoCircle from './ProfilePhotoCircle.js';

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

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 ProfileCardHorizontal = ({ profileid, hideIcon, profileObj, skipFollow, skiptOnPress }) => {
    let [profile, setProfile] = useState(profileObj || {});
    const navigation = useNavigation();

    useEffect(() => {
        let subscribed = true;
        const getData = async () => {
            if (profile?._id) return 0;
            let cacheProfile = await getName(profileid);
            if (cacheProfile && cacheProfile.profile && subscribed) setProfile(cacheProfile);
            let p = await API.getUserProfile(profileid).catch(() => { return {} });
            if (subscribed) setProfile(p);
            storeName(profileid, p)
        };
        getData();
        return () => {
            subscribed = false;
        }
    }, [profileid]);

    let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';
    icon = icon === "person-outline" && profile.subscription && profile.subscription > (new Date() - 0) ? "assignment-ind" : icon;
    icon = icon === "group" && profile.isCourse ? "subscriptions" : icon;
    let photoUrl = profile.profile?.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;

    const onPress = () => {
        if (skiptOnPress) return 0;
        return navigation.navigate('Profile', { profileid: profile._id })
    }
    //console.log(profile)

    return (
        <Card style={styles.content} mode="elevated">
            <Card.Content style={{
                marginLeft: -8,
                marginTop: -8,
                marginBottom: -4
            }}>
                <View style={{ flexDirection: "row", alignItems: "center", marginBottom: -8 }}>
                    <ProfilePhotoCircle profileid={profile._id} />
                </View>
                <Paragraph lineBreakMode="clip" numberOfLines={2} style={{  marginLeft: 40, top: 0, fontSize: 13, lineHeight: 0 }} color={"#FFF"}>{profile.profile?.description}</Paragraph>
                {
                    profile.subscribed && Object.keys(profile.subscribed).length ?
                        <Text style={{ marginLeft: 40, top: 0, fontSize: 11, marginTop: 0, fontSize: 10, fontWeight: "500" }} >{Object.keys(profile.subscribed).length} Following</Text>
                        : <></>
                }
                {skipFollow ? <></> :
                    <View style={{
                        position: "absolute",
                        top: 15,
                        right: 10,
                        width: 30,
                        height: 30,
                        backgroundColor: "#ddd",
                        borderRadius: 25,
                        opacity: 0.5,
                    }}>
                        <FollowButton profile={profile._id ? profile : { _id: profileid }} iconSize={14} />
                    </View>
                }
            </Card.Content>
        </Card>
    );
}

export default React.memo(ProfileCardHorizontal);

const styles = StyleSheet.create({
    content: {
        margin: 0,
        marginBottom: 1,
        padding: 0,
        //backgroundColor: "rgba(0,0,0,0)"
        marginLeft: -5,
        marginRight: -5,
    },
});
