import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle } from 'react-native';
import styles from './ForumUserInfosStyles';
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelForumUser } from '../../Model/PixelForumUser';
import FastImage from 'react-native-fast-image';
import { PixelwolfText } from 'react-native-pixel-components';
import { ForumUserClassBadge } from '../ForumUserClassBadge/ForumUserClassBadge';

interface IProps {
    // Props type definition
    style?: ViewStyle | ViewStyle[]
    user: PixelForumUser
}

interface IState {
    // State type definition
}

export const ForumUserInfos: FunctionComponent<IProps> = (props) => {

    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)

    const initialState: IState = {
    };


    // ComponentDidMount
    useEffect(() => {
        return () => {
            //ComponentDidUnmount
        }
    }, [])

    return (
        <View style={[styles.centeredRow, props.style]} >
            <FastImage style={styles.avatar} source={{ uri: props.user.avatar }} />
            <View style={[styles.smallMarginLeft, styles.upAlignedColumn]}>
                <PixelwolfText weight={'bold'}>
                    {props.user.name}
                </PixelwolfText>
                <ForumUserClassBadge user={props.user} />
            </View>
        </View>
    );
};