import React, { PropTypes } from 'react';
import Colors from '~/theme/Colors';
import Event from '~/helpers/Event';
import moment from 'moment';
import { connect } from 'react-redux';
import { emitEvent } from '~/redux/chat';
import { initializeSocket } from '~/redux/primus';

const getStyles = ({ style, color }) => (
  {
    outer: Object.assign({
      clear: 'both',
      float: 'left',
      marginBottom: 10,
    }, style),

    event: {
      color,
      fontSize: 14,
    },
  }
);

export class ChannelEvent extends React.Component {
  static propTypes = {
    className: PropTypes.string,
    dispatch: PropTypes.func.isRequired,
    event: PropTypes.object.isRequired,
    primus: PropTypes.object.isRequired,
    style: PropTypes.object,
  };

  render() {
    const {
      event,
      primus,
      style,
    } = this.props;

    let parsedEvent = '';
    let color = Colors.secondaryText;

    switch (event.type) {
      case 'join':
        parsedEvent = <span><b>{event.username}</b> has joined #{event.channel}</span>;
        break;

      case 'leave':
        parsedEvent = <span><b>{event.username}</b> has left #{event.channel}</span>;
        break;

      case 'quit':
        parsedEvent = <span>{event.username} has disconnected</span>;
        break;

      case 'message':
        color = Colors.primaryText;
        parsedEvent = <span><b>{event.username}</b>: {event.message}</span>;
        break;

      case 'reconnecting':
        color = Colors.error;
        parsedEvent = <span>Reconnecting...</span>;
        break;

      case 'reconnect failed':
        color = Colors.error;
        parsedEvent = (
          <span>
            <span>Reconnection failed. </span>
            <a
              href="#"
              onClick={() => primus.socket.open()}
              style={{ color: Colors.error }}
            >
              <b>Click here</b>
            </a>
            <span> to try again</span>
          </span>
        );
        break;

      case 'error':
        color = Colors.error;
        parsedEvent = <span>Error: {event.message}</span>;
        break;

      case 'connected':
        color = Colors.success;
        parsedEvent = <span>Connected!</span>;
        break;

      default:
        parsedEvent = <span>Unknown Event</span>;
        break;
    }

    const styles = getStyles({
      style,
      color,
    });

    return event.silent
      ? null
      : (
        <div style={styles.outer}>
          <div style={styles.event}>
            <span>[{moment(event.timestamp).format('HH:mm')}] </span>
            {parsedEvent}
          </div>
        </div>
      );
  }
}

function mapStateToProps(state) {
  return {
    primus: state.primus,
  };
}

export default connect(mapStateToProps)(ChannelEvent);

@@ -672,24 +672,64 @@
 isRequired,%0A
+    login: PropTypes.object.isRequired,%0A
     primus: 
@@ -753,24 +753,24 @@
 isRequired,%0A
-
     style: P
@@ -830,16 +830,29 @@
  event,%0A
+      login,%0A
       pr
@@ -889,16 +889,66 @@
 s.props;
+%0A    const me = event.username === login.username;
 %0A%0A    le
@@ -967,16 +967,42 @@
 t = '';%0A
+    let timestamp = true;%0A
     let 
@@ -1077,16 +1077,183 @@
 'join':%0A
+        if (me) %7B%0A          color = Colors.success;%0A          timestamp = false;%0A          parsedEvent = %3Cspan%3EWelcome to #%7Bevent.channel%7D!%3C/span%3E;%0A        %7D else %7B%0A  
         
@@ -1324,32 +1324,42 @@
 hannel%7D%3C/span%3E;%0A
+        %7D%0A
         break;%0A%0A
@@ -2815,24 +2815,38 @@
 %0A           
+ %7Btimestamp &&
  %3Cspan%3E%5B%7Bmom
@@ -2883,32 +2883,33 @@
 H:mm')%7D%5D %3C/span%3E
+%7D
 %0A            %7Bpa
@@ -3012,16 +3012,40 @@
 eturn %7B%0A
+    login: state.login,%0A
     prim

add welcome message to Event component when joining channel