import React, {Component} from "react";
import {connect} from "react-redux";
import "moment/locale/fa";
import {
  avatarNameGenerator,
  avatarUrlGenerator
} from "../utils/helpers";

//strings

//actions
import {threadCreateOnTheFly} from "../actions/threadActions";

//components
import Avatar, {AvatarImage} from "../../../Talk-ui-kit/src/avatar";
import Container from "../../../Talk-ui-kit/src/container";

//styling

//statics

//functions

@connect()
export default class extends Component {

  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const {showAvatar} = nextProps;
    const {showAvatar: currentShowAvatar} = this.props;
    return showAvatar !== currentShowAvatar;
  }

  onAvatarClick(participant) {
    this.props.dispatch(threadCreateOnTheFly(participant.coreUserId, participant));
  }

  render() {
    const {message, isGroup, isChannel, showAvatar} = this.props;
    const enableClickCondition = (isGroup || isChannel);
    const fragment =
      showAvatar ?
        <Avatar onClick={enableClickCondition ? this.onAvatarClick.bind(this, message.participant) : null}
                cursor={enableClickCondition ? "pointer" : null}>
          <AvatarImage src={avatarUrlGenerator(message.participant.image, avatarUrlGenerator.SIZES.SMALL)}
                       text={avatarNameGenerator(message.participant.name).letter}
                       textBg={avatarNameGenerator(message.participant.name).color}/>
        </Avatar>
        :
        <Container style={{width: "50px", display: "inline-block"}}/>;
    return showAvatar ?
      <Container inline inSpace style={{maxWidth: "50px", verticalAlign: "top"}}>
        {fragment}
      </Container>
      :
      fragment;
  }

}