import { Avatar as MuiAvatar } from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import { fetchUser } from 'actions/users';
import cn from 'classnames';
import {
  number,
  object,
  string,
} from 'prop-types';
import { pathOr } from 'ramda';
import React, { Component } from 'react';
import { connect } from 'react-redux';

class Avatar extends Component {
  static propTypes = {
    user: string.isRequired,
    size: number,
    avatar: object,
  };

  static defaultProps = {
    size: 1,
  };

  componentDidMount() {
    const { user, avatar } = this.props;
    if (!avatar) {
      fetchUser(user);
    }
  }

  render() {
    const { size: em, avatar } = this.props;
    const size = `${em}em`;

    return (
      <MuiAvatar
        src={pathOr(null, ['src'])(avatar)}
        style={{ width: size, height: size }}
        className={cn('avatar', { [pathOr(null, ['platform'])(avatar)]: true })}
      >
        {!pathOr(null, ['src'])(avatar) && <PersonIcon />}
      </MuiAvatar>
    );
  }
}

const mapStateToProps = ({ users }, { user }) => ({
  ...users[user],
});

export default connect(mapStateToProps)(Avatar);