import React, { Component } from 'react';
import { Link } from 'react-router';
import { FormattedRelative } from 'react-intl';
import numeral from 'numeral';
import Body from '../post/Body';
import Avatar from '../widgets/Avatar';
import Icon from '../widgets/Icon';
import { sortCommentsFromSteem } from '../helpers/stateHelpers';
import './CommentItem.scss';

const renderOptimisticComment = (comment) => {
  return (
    <div className="CommentItem">
      <div className={`CommentItem__content CommentItem__content--level-${comment.depth}`}>
        <div className="CommentUser">
          <Link to={`/@${comment.author}`}>
            <Avatar xs username={comment.author} />
          </Link>
        </div>
        <div className="CommentBody">
          <span className="CommentBody__username">
            <Link to={`/@${comment.author}`}>
              {comment.author}
            </Link>
          </span>
          <Body body={comment.body} />
        </div>
      </div>
    </div>
  );
};

export default class CommentItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showReplies: props.isSinglePage,
    };
  }

  toggleShowReplies = (e) => {
    this.setState({ showReplies: !this.state.showReplies });
  };

  handleReplyClick(e) {
    e.stopPropagation();
    const { comment } = this.props;

    this.props.openCommentingDraft({
      parentAuthor: comment.author,
      parentPermlink: comment.permlink,
      category: comment.category,
      id: comment.id,
      isReplyToComment: true,
    });
  }

  render() {
    const { comment, likeComment, unlikeComment, dislikeComment, auth, allComments, sortOrder } = this.props;

    if (comment.isOptimistic) {
      return renderOptimisticComment(comment);
    }

    const payout =
      parseFloat(comment.total_payout_value) +
      parseFloat(comment.total_pending_payout_value);

    const isCommentLiked =
      auth.isAuthenticated &&
      comment.active_votes.some(vote => vote.voter === auth.user.name && vote.percent > 0);

    const isCommentDisliked =
      auth.isAuthenticated &&
      comment.active_votes.some(vote => vote.voter === auth.user.name && vote.percent < 0);

    return (
      <div className="CommentItem">
        <div className={`CommentItem__content CommentItem__content--level-${comment.depth}`}>
          <div className="CommentUser">
            <Link to={`/@${comment.author}`}>
              <Avatar xs username={comment.author} />
            </Link>
          </div>
          <div className="CommentBody">
            <span className="CommentBody__username">
              <Link to={`/@${comment.author}`}>
                {comment.author}
              </Link>
              {' '}
              <span className="text-info">
                <FormattedRelative value={comment.created} />
              </span>
            </span>
            <Body body={comment.body} />
            <div className="CommentActionButtons">
              <div className="CommentActionButtons__button">
                <a
                  onClick={isCommentLiked
                    ? () => unlikeComment(comment.id)
                    : () => likeComment(comment.id)}
                  className={isCommentLiked ? 'active' : ''}
                >
                  <Icon name="thumb_up" xs />
                </a>{ ' ' }
                { numeral(comment.net_votes).format('0,0') }
              </div>

              <div className="CommentActionButtons__button">
                <a
                  onClick={isCommentDisliked
                    ? () => unlikeComment(comment.id)
                    : () => dislikeComment(comment.id)}
                  className={isCommentDisliked ? 'active' : ''}
                >
                  <Icon name="thumb_down" xs />
                </a>{ ' ' }
                { numeral(comment.active_votes.filter(vote => vote.percent < 0).length).format('0,0') }
              </div>

              <div className="CommentActionButtons__button">
                { numeral(payout).format('$0,0.000') }
              </div>

              <a onClick={(e) => this.handleReplyClick(e)}>
                <Icon name="reply" xs />
              </a>

              { ' ' }

              { (comment.children > 0 && !this.state.showReplies) &&
              <a tabIndex="0" onClick={this.toggleShowReplies}>
                View {comment.children}{' '}
                {comment.children > 1 ? 'replies' : 'reply'}
              </a>
              }
            </div>
          </div>
        </div>
        { this.state.showReplies && allComments.listByCommentId[comment.id] &&
          sortCommentsFromSteem(
            allComments.listByCommentId[comment.id],
            allComments,
            sortOrder
          ).map(commentId =>
            <CommentItem
              { ...this.props }
              key={commentId}
              comment={allComments.comments[commentId]}
            />
          )
        }
      </div>
    );
  }
};


@@ -2322,36 +2322,41 @@
 $%7Bcomment.depth%7D
+ pb-2
 %60%7D%3E%0A
-
           %3Cdiv c
@@ -2438,35 +2438,130 @@
          %3CAvatar
- xs
+%0A                className=%7Bthis.props.isSinglePage ? 'Avatar--md' : 'Avatar--xs'%7D%0A               
  username=%7Bcomme
@@ -2562,32 +2562,46 @@
 %7Bcomment.author%7D
+%0A             
  /%3E%0A            

Use biger avatar on single post comment