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

import Chart from '../../components/Chart/index';

export class ChannelData extends Component {

  constructor(props) {
    super(props);

    this.state = {
      msgCount: 0,
      msgPerMin: 0,
      charCount: 0,
      avgLength: 0,
      lastMsg: '',
      time: new Date(),
    };
  }

  componentWillReceiveProps(props) {
    let newCount;
    let newAvgLength;
    let newCharCount;
    const elapsedMinutes = (Math.abs(new Date() - this.state.time)) / 60000;

    if (this.state.lastMsg !== props.message) {
      newCount = this.state.msgCount + 1;
      newCharCount = this.state.charCount + props.message.length;
      newAvgLength = newCharCount / newCount;
    } else {
      newCount = this.state.msgCount;
      newCharCount = this.state.charCount;
      newAvgLength = this.state.avgLength;
    }
    const newMsgPerMin = newCount / elapsedMinutes;

    this.setState({
      msgCount: newCount,
      msgPerMin: newMsgPerMin,
      charCount: newCharCount,
      avgLength: newAvgLength,
      lastMsg: props.message,
    });
  }

  render() {
    return (
      <div>
        <table className="table table-hover">
          <thead>
            <tr>
              <th>Messages per minute: {this.state.msgPerMin}</th>
              <th>Average message length: {this.state.avgLength}</th>
            </tr>
          </thead>
          <tbody>
            <tr key={name}>
              <td><Chart data={this.state.msgPerMin} color="red" /></td>
              <td><Chart data={this.state.avgLength} color="blue" /></td>
            </tr>
          </tbody>
        </table>
        <ul>
          <li>Channel: {this.props.channel}</li>
          <li>Total Messages since arrival: {this.state.msgCount}</li>
        </ul>
      </div>
    );
  }
}

function mapStateToProps({ message }) {
  if (message.user) {
    return {
      channel: message.channel,
      message: message.msg,
      user: message.user.username,
      emotes: message.user.emotes,
    };
  }
  return { noMessage: message };
}

export default connect(mapStateToProps)(ChannelData);

@@ -355,23 +355,75 @@
 Date(),%0A
+      msgPerMinArray: %5B%5D,%0A      avgLengthArray: %5B%5D,%0A
     %7D;%0A
-
   %7D%0A%0A  c
@@ -992,16 +992,168 @@
 Minutes;
+%0A    const newMsgPerMinArray = this.state.msgPerMinArray.push(newMsgPerMin);%0A    const newAvgLengthArray = this.state.avgLengthArray.push(newAvgLength);
 %0A%0A    th
@@ -1315,16 +1315,98 @@
 essage,%0A
+      msgPerMinArray: newMsgPerMinArray,%0A      avgLengthArray: newAvgLengthArray,%0A
     %7D);%0A
@@ -1740,19 +1740,8 @@
  %3Ctr
- key=%7Bname%7D
 %3E%0A  
@@ -1789,16 +1789,21 @@
 sgPerMin
+Array
 %7D color=
@@ -1867,16 +1867,21 @@
 vgLength
+Array
 %7D color=

swap channel