import * as React from 'react';
import { Subscription } from 'rxjs';
import { currentUser } from '../auth';
/**
 * UserAvatar displays the avatar of an Avatarable object
 */
export class UserAvatar extends React.Component {
    constructor(props) {
        super(props);
        this.subscriptions = new Subscription();
        this.state = {
            user: null,
        };
    }
    componentDidMount() {
        if (this.props.user) {
            this.setState({ user: this.props.user });
        }
        else {
            this.subscriptions.add(currentUser.subscribe(user => this.setState({ user }), error => console.error(error)));
        }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.user) {
            this.setState({ user: nextProps.user });
        }
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        let avatar = null;
        if (this.state.user && this.state.user.avatarURL) {
            try {
                const url = new URL(this.state.user.avatarURL);
                if (this.props.size) {
                    url.searchParams.set('s', this.props.size + '');
                }
                avatar = React.createElement("img", { className: "avatar-icon", src: url.href, "data-tooltip": this.props.tooltip });
            }
            catch (e) {
                // noop
            }
        }
        if (!avatar) {
            return null;
        }
        return (React.createElement("div", { onClick: this.props.onClick, className: `avatar${this.props.className ? ' ' + this.props.className : ''}` }, avatar));
    }
}
//# sourceMappingURL=UserAvatar.js.map