import React, { Component } from 'react';
import { Link } from 'react-router';
import numeral from 'numeral';
import BodyShort from '../post/body-short';
import Avatar from '../widgets/Avatar';
import Icon from '../widgets/Icon';

import './CommentItem.scss';

const renderOptimisticComment = (comment) => {
  return (
    <div className="CommentItem">
      <Link to={`/@${comment.author}`}>
        <Avatar xs username={comment.author} /> @{ comment.author }
      </Link>
      { ' ' }
      <b>$0.00</b>
      { ' ' }
      <BodyShort body={comment.body} />
    </div>
  );
};

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

  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, auth, allComments } = 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);

    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>
            <BodyShort 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">
                ${ payout }
              </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] &&
          allComments.listByCommentId[comment.id].map(commentId =>
            <CommentItem
              { ...this.props }
              key={commentId}
              comment={allComments.comments[commentId]}
            />
          )
        }
      </div>
    );
  }
};


@@ -342,24 +342,158 @@
 mmentItem%22%3E%0A
+      %3Cdiv className=%7B%60CommentItem__content CommentItem__content--level-$%7Bcomment.depth%7D%60%7D%3E%0A        %3Cdiv className=%22CommentUser%22%3E%0A    
       %3CLink 
@@ -512,32 +512,36 @@
 ment.author%7D%60%7D%3E%0A
+    
         %3CAvatar 
@@ -575,90 +575,253 @@
 %7D /%3E
- @%7B comment.author %7D%0A
+%0A          %3C/Link%3E%0A        %3C/div%3E%0A        %3Cdiv className=%22CommentBody%22%3E%0A          %3Cspan className=%22CommentBody__username%22%3E%0A      
       %3C
-/
 Link
-%3E%0A      %7B ' ' %7D%0A      %3Cb%3E$0.00%3C/b%3E%0A      %7B ' ' %7D%0A
+ to=%7B%60/@$%7Bcomment.author%7D%60%7D%3E%0A              @%7B comment.author %7D%0A            %3C/Link%3E%0A          %3C/span%3E%0A    
     
@@ -852,24 +852,52 @@
 nt.body%7D /%3E%0A
+        %3C/div%3E%0A      %3C/div%3E%0A
     %3C/div%3E%0A 

change the template for optimistic comment