import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

import { UserType } from './Types';

import Icon from './Icon';

import { fetchUserUri } from '../api';

import './Avatar.css';

class Avatar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: props.user
        };
    }
    componentDidMount() {
        let user = this.state.user;
        if (!user.uid && user.uri) {
            fetchUserUri(user.uri).then(response => {
                this.setState({
                    user: response.data
                });
            });
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        return this.state.user.avatar != nextState.user.avatar || this.state.user.uid != nextState.user.uid
        || this.props.user.avatar != nextProps.user.avatar || this.props.user.uid != nextProps.user.uid;
    }
    componentDidUpdate(prevProps, prevState, shouldReload) {
        this.setState({
            user: this.props.user
        });
    }
    render() {
        let user = this.state.user;
        return (
            <div className="Avatar" style={this.props.style}>
                <div className="msg-avatar">
                    {
                        user.uname ?
                            <Link to={{ pathname: this.props.link || `/${user.uname}/` }}>
                                {user.avatar ?
                                    <img src={user.avatar} alt={`${user.uname}`} />
                                    : <Icon name="ei-spinner" size="m" />}
                            </Link>
                            : <Icon name="ei-spinner" size="m" />
                    }
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                    <span>
                        <Link to={{ pathname: `/${user.uname}/` }}>
                            <span>{user.uname}</span>
                        </Link>
                    </span>
                    {this.props.children}
                </div>
            </div>
        );
    }
}

export default Avatar;

export const AvatarLink = React.memo(props => {
    return (
        <Link to={{ pathname: props.link || `/${props.user.uname}/` }}>
            <img src={props.user.avatar} alt={`${props.user.uname}`} />
            {props.user.uname}
        </Link>
    );
});

Avatar.propTypes = {
    user: UserType,
    link: PropTypes.string,
    style: PropTypes.object,
    children: PropTypes.node
};