import React from 'react';
import PropTypes from 'prop-types';

import { Image, TouchableOpacity, View } from 'react-native';
import { Avatar, Icon } from 'react-native-elements';

import styles from './UserProfileButton.styles.js';

export default function UserProfileButton({
    avatarUrl,
    initials,
    isRegisteredAccount,
    navigation,
}) {
    const _goToProfile = () => {
        navigation.navigate('Profile');
        return false;
    };

    return (
        <TouchableOpacity onPress={_goToProfile}>
            {isRegisteredAccount !== null ? (
                avatarUrl !== null ? (
                    <Avatar source={{ uri: avatarUrl }} />
                ) : (
                    <Avatar title={initials} />
                )
            ) : (
                <Icon name="ei-user" type="evilicons" size={28} />
            )}
        </TouchableOpacity>
    );
}

UserProfileButton.propTypes = {
    avatarUrl: PropTypes.string,
    initials: PropTypes.string,
    isRegisteredAccount: PropTypes.bool,
};

UserProfileButton.propTypes = {
    avatarUrl: null,
    initials: null,
    isRegisteredAccount: false,
};