import React from 'react';
import { TYPE_NAME, TYPE_DESC } from '../constants/replyType';
import moment from 'moment';
import ExpandableText from './ExpandableText';
import { linkify, nl2br } from '../util/text';
import { Link } from '../routes';
import { sectionStyle } from './ReplyConnection.styles';

function RelatedReplyItem({
  reply,
  articleId,
  articleText,
  similarity,
  onConnect,
}) {
  const replyVersion = reply.getIn(['versions', 0]);
  const createdAt = moment(replyVersion.get('createdAt'));
  const similarityPercentage = Math.round(similarity * 100);
  return (
    <li className="root">
      <header className="section">
        <Link route="article" params={{ id: articleId }}>
          <a>相關訊息</a>
        </Link>被標示為：<strong title={TYPE_DESC[replyVersion.get('type')]}>
          {TYPE_NAME[replyVersion.get('type')]}
        </strong>
      </header>
      <section className="section">
        <h3>
          相關訊息原文<span className="similarity">
            （關聯度 ：<strong>{similarityPercentage} %</strong>）
          </span>
        </h3>
        <blockquote>
          <ExpandableText wordCount={40}>
            {/*
              Don't need nl2br here, because the user just need a glimpse on the content.
              Line breaks won't help the users.
            */}
            {linkify(articleText)}
          </ExpandableText>
        </blockquote>
      </section>
      <section className="section">
        <h3>
          回應
        </h3>
        <ExpandableText>
          {nl2br(linkify(replyVersion.get('text')))}
        </ExpandableText>
      </section>
      <footer>
        <Link route="reply" params={{ id: reply.get('id') }}>
          <a title={createdAt.format('lll')}>{createdAt.fromNow()}</a>
        </Link>
        ・<button type="button" value={reply.get('id')} onClick={onConnect}>
          將這份回應加進此文章的回應
        </button>
      </footer>

      <style jsx>{`
        .root {
          padding: 24px;
          border: 1px solid #ccc;
          border-top: 0;
        }
        .root:first-child {
          border-top: 1px solid #ccc;
        }
        .root:hover {
          background: rgba(0, 0, 0, .05);
        }
        blockquote {
          font-size: 13px;
          color: #999;
          border-left: #ccc 2px solid;
          padding-left: 8px;
          margin-left: 0;
        }
        .similarity {
          font-weight: normal;
        }
      `}</style>
      <style jsx>{sectionStyle}</style>
    </li>
  );
}

export default function RelatedReplies({
  relatedReplies,
  getArticleSimilarity,
  onConnect,
}) {
  if (!relatedReplies.size) {
    return <p>目前沒有相關的回應</p>;
  }

  return (
    <ul className="items">
      {relatedReplies.map(reply => {
        const articleId = reply.getIn(['article', 'id']);
        const articleText = reply.getIn(['article', 'text']);
        const similarity = getArticleSimilarity(articleText);
        return (
          <RelatedReplyItem
            key={`${reply.get('id')}-${articleId}`}
            reply={reply}
            articleId={articleId}
            articleText={articleText}
            similarity={similarity}
            onConnect={onConnect}
          />
        );
      })}
      <style jsx>{`
        .items {
          list-style-type: none;
          padding-left: 0;
        }
      `}</style>
    </ul>
  );
}

@@ -329,77 +329,150 @@
 em(%7B
-%0A 
  reply,
-%0A  articleId,%0A  articleText,%0A  similarity,%0A  onConnect,%0A%7D) %7B
+ similarity, onConnect %7D) %7B%0A  const articleId = reply.getIn(%5B'article', 'id'%5D);%0A  const articleText = reply.getIn(%5B'article', 'text'%5D);
 %0A  c
@@ -2818,79 +2818,52 @@
 nst 
-articleId = reply.getIn(%5B'article', 'id'%5D);%0A        const articleText =
+similarity = getArticleSimilarity(%0A         
  rep
@@ -2891,17 +2891,16 @@
 'text'%5D)
-;
 %0A       
@@ -2904,59 +2904,8 @@
     
-const similarity = getArticleSimilarity(articleText
 );%0A 
@@ -2988,21 +2988,8 @@
 d')%7D
--$%7BarticleId%7D
 %60%7D%0A 
@@ -3017,80 +3017,8 @@
 ly%7D%0A
-            articleId=%7BarticleId%7D%0A            articleText=%7BarticleText%7D%0A
     

Simplify RelatedReplyItem props