import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

/* component styles */
import { styles } from './styles.scss';

export default class MessageDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      blurClass: 'row blurred',
      blurBtn: 'Show Chat',
      blurMsg: 'Twitch channel chats can be a scary place. Unblur at your own risk!'
    };
  }

  toggleBlur() {
    if (this.state.blurClass === 'row') {
      this.setState({
        blurClass: 'row blurred',
        blurBtn: 'Show Chat',
        blurMsg: 'Twitch channel chats can be a scary place. Unblur at your own risk!'
      });
    } else {
      this.setState({
        blurClass: 'row',
        blurBtn: 'Blur Chat',
        blurMsg: ''
      });
    }
  }

  parseMessage(msg, emotes) {
    let splitText;

    if (emotes) {
      splitText = msg.split('');
      for (let i in emotes) {
        let e = emotes[i];
        for (let j in e) {
          let mote = e[j];
          if (typeof mote === 'string') {
            mote = mote.split('-');
            mote = [parseInt(mote[0]), parseInt(mote[1])];
            let length =  mote[1] - mote[0];
            let empty = Array.apply(null, new Array(length + 1)).map(function() { return '' });
            splitText = splitText.slice(0, mote[0]).concat(empty).concat(splitText.slice(mote[1] + 1, splitText.length));
            splitText.splice(mote[0], 1, parseInt(i));
          }
        }
      }
      msg = splitText.reduce((msgArr, char, i) => {
        if (typeof char == 'number') {
          msgArr[msgArr.length] = parseInt(char);
        } else {
          if (typeof msgArr[msgArr.length - 1] == 'number') {
            msgArr[msgArr.length] = char;
          } else {
            msgArr[msgArr.length - 1] += char;
          }
        }
        return msgArr;
      }, ['']);
    } else {
      msg = [msg];
    }
    return msg;
  }

  renderMessage(msg) {
    if (!msg) return;
    return msg.map((chunk) => {
      if (typeof chunk === 'number') {
        return (
          <img className="emoticon" src={`http://static-cdn.jtvnw.net/emoticons/v1/${chunk}/3.0`} />
        );
      } else {
        return (
          <span>{chunk}</span>
        );
      }
    });
  }

  render() {
    return (
      <section className={`${styles}`}>
        <button className="btn btn-danger" onClick={this.toggleBlur.bind(this)}>{this.state.blurBtn}</button><span>&nbsp;&nbsp;{this.state.blurMsg}</span>
        <div className={this.state.blurClass}>
          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div className="message-ticker-user">
              <ReactCSSTransitionGroup className="ticker-user" transitionName="fade" transitionEnterTimeout={300} transitionLeaveTimeout={0}>
                <h4 key={this.props.msg.message}>
                  {this.props.msg.user.username}
                </h4>
              </ReactCSSTransitionGroup>
            </div>
            <div className="message-ticker-message">
              <ReactCSSTransitionGroup className="ticker-message" transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={200}>
                <h4 key={this.props.user}>
                  {this.renderMessage(this.parseMessage(this.props.msg.msg, this.props.msg.user.emotes))}
                </h4>
              </ReactCSSTransitionGroup>
            </div>
          </div>
        </div>
      </section>
    );
  }
}

@@ -1967,22 +1967,19 @@
 %0A  %7D%0A%0A  
-render
+map
 Message(
@@ -2035,24 +2035,78 @@
 chunk) =%3E %7B%0A
+      const rand = parseInt(Math.random() * 1000000);%0A
       if (ty
@@ -2184,16 +2184,27 @@
 moticon%22
+ key=%7Brand%7D
  src=%7B%60h
@@ -2319,16 +2319,27 @@
    %3Cspan
+ key=%7Brand%7D
 %3E%7Bchunk%7D
@@ -2378,16 +2378,213 @@
 );%0A  %7D%0A%0A
+  renderUser(user) %7B%0A    return (%0A      %3Ch4 key=%7Buser%7D%3E%0A        %7Buser%7D%0A      %3C/h4%3E%0A    );%0A  %7D%0A%0A  renderMessage(user, msg) %7B%0A    return (%0A      %3Ch4 key=%7Buser%7D%3E%0A        %7Bmsg%7D%0A      %3C/h4%3E%0A    );%0A  %7D%0A%0A
   render
@@ -3123,61 +3123,25 @@
     
-%3Ch4 key=%7Bthis.props.msg.message%7D%3E%0A                  %7B
+%7Bthis.renderUser(
 this
@@ -3164,39 +3164,18 @@
 username
+)
 %7D
-%0A                %3C/h4%3E
 %0A       
@@ -3451,65 +3451,53 @@
     
-%3Ch4 key=%7Bthis.props.user%7D%3E%0A                  %7Bthis.render
+%7Bthis.renderMessage(this.props.user, this.map
 Mess
@@ -3570,31 +3570,10 @@
 es))
+)
 %7D
-%0A                %3C/h4%3E
 %0A   

Add keys to all children