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


import { UserType } from './Types';
import UserInfo from './UserInfo';
import Avatar from './Avatar';

export function Friends({ user, ...rest }) {
    return <Users user={user} prop='read' />;
}

export function Readers({ user, ...rest }) {
    return <Users user={user} prop='readers' />;
}

class Users extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {}
        };
    }
    updateUser = (user) => {
        this.setState({
            user: user
        });
    }
    render() {
        return (
            <UserInfo user={this.props.user} onUpdate={this.updateUser}>
                <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}>
                    {
                        this.state.user[this.props.prop] &&
                        this.state.user[this.props.prop].map(user =>
                            <Avatar key={user.uid} user={user} />
                        )
                    }
                </div>
            </UserInfo>
        );
    }
}


Friends.propTypes = {
    user: PropTypes.string.isRequired
};

Readers.propTypes = {
    user: PropTypes.string.isRequired
};

Users.propTypes = {
    user: PropTypes.string.isRequired,
    prop: PropTypes.string.isRequired
};