import React, { Component, PropTypes } from 'react';
import _ from 'lodash';
import { connect } from 'react-redux';

class FollowThread extends Component {
  static propTypes = {
    settings: PropTypes.object,
    dispatch: PropTypes.func,
    threadList: PropTypes.array, // { id, postId, numPostDiff, numPostFromTracker, numPost, title }
  }

  static defaultProps = {
    threadList: [],
    settings: {},
  }

  constructor(comProps) {
    super(comProps);

    this.state = {
      showThreadList: false,
    };
    this.dispatch = comProps.dispatch;
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !_.isEqual(nextProps.threadList, this.props.threadList) ||
            !_.isEqual(nextState.showThreadList, this.state.showThreadList);
  }

  getTime(timeStamp) {
    const date = new Date(timeStamp);
    /* eslint-disable max-len */
    return `${date.getHours()}:${date.getMinutes()} ${date.getDay()}-${date.getMonth() + 1}-${date.getFullYear()}`;
    /* eslint-enable max-len */
  }

  toggleThreadList() {
    const { showThreadList } = this.state;
    this.setState({ showThreadList: !showThreadList });
  }

  renderThread(thread) {
    const { id, postId, numPostDiff, title } = thread;
    const link = postId === null
      ? `showthread.php?t=${id}`
      : `showthread.php?p=${postId}#post${postId}`;
    return (
      <div className="quote-row" key={id}>
        <div className="quote-title">
          <a href={link}>
            {title}
          </a>
        </div>
        <div className="quote-bottom">
          <i className="fa fa-arrow-right"></i> Có {numPostDiff} bài mới
        </div>
      </div>
    );
  }

  render() {
    const { threadList } = this.props;
    const renderThread = this.renderThread;
    const btnClass = `btn tooltip-right ${this.state.showThreadList ? 'active' : ''}`;
    return (
      <div className="btn-group">
        <div
          className={btnClass}
          onClick={() => this.toggleThreadList()}
          data-tooltip="Follow Threads"
        >
          <i className="fa fa-th-list"></i>
        </div>
        {(() => {
          if (this.state.showThreadList) {
            return [
              <div
                key="voz-mask-quote-list"
                className="voz-mask quote-list-mask"
                onClick={() => this.setState({ showThreadList: !this.state.showThreadList })}
              ></div>,
              <div className="btn-options" key="quote-list">
                <h3>Subscribed Threads</h3>
                <div className="quote-list">
                  {threadList.map(renderThread)}
                </div>
              </div>,
            ];
          }
          return null;
        })()}
      </div>
    );
  }
}

function estimateSubscribedThreads(followThreads, threadTracker) {
  if (_.isEmpty(followThreads)) return [];
  return Object.keys(followThreads).map((id) => {
    const { page, postNum, title } = followThreads[id];
    const tracked = threadTracker[id];
    const postId = tracked ? tracked.postId : null;
    const numPostFromTracker = tracked ? tracked.page * 10 + tracked.postNum : 0;
    const numPostTotal = page * 10 + postNum;
    const numPostDiff = numPostTotal - numPostFromTracker;
    return { id, postId, numPostDiff, numPostFromTracker, numPostTotal, title };
  });
}

const mapStateToProps = state => {
  const { followThreads, settings, threadTracker } = state.vozLiving;
  const estimated = estimateSubscribedThreads(followThreads, threadTracker);
  return { threadList: estimated, settings };
};

export default connect(mapStateToProps)(FollowThread);

@@ -108,16 +108,128 @@
 -redux';
+%0Aimport %7B%0A  unsubscribeThread,%0A%7D from '../common/threadSubscription';%0Aimport * as actions from '../actions/voz';
 %0A%0Aclass 
@@ -1233,32 +1233,207 @@
 adList %7D);%0A  %7D%0A%0A
+  unsubscribe(id) %7B%0A    this.setState(%7B isLoading: true %7D);%0A    unsubscribeThread(id)%0A      .then(() =%3E %7B%0A        this.dispatch(actions.unsubscribeThread(id));%0A      %7D);%0A  %7D%0A%0A
   renderThread(t
@@ -1769,16 +1769,246 @@
    %3C/a%3E%0A
+          %3Cspan%0A            className=%22pull-right%22%0A            onClick=%7B() =%3E this.unsubscribe(id)%7D%0A            style=%7B%7B marginRight: '10px', cursor: 'pointer' %7D%7D%0A          %3E%3Cspan className=%22fa fa-trash%22%3E%3C/span%3E%0A          %3C/span%3E%0A
         
@@ -2222,52 +2222,8 @@
 ps;%0A
-    const renderThread = this.renderThread;%0A
     
@@ -3052,16 +3052,26 @@
 ist.map(
+m =%3E this.
 renderTh
@@ -3074,16 +3074,19 @@
 erThread
+(m)
 )%7D%0A     

add delete follow threads