import React from 'react';

export default React.createClass({
  formatDate(date) {
    return new Date(date * 1000).toLocaleString();
  },
  formatText(text) {
    let channelLink = (id) => `#${this.props.channels[id].name}`;
    let userLink = (id) => `@${this.props.users[id].name}`;
    let specialCommand = (command) => `@${command}`;
    if (text) {
      return text.replace(/<#([0-9A-Za-z]+)>/, (m, id) => channelLink(id))
        .replace(/<#([0-9A-Za-z]+)\|([0-9A-Za-z]+)>/gi, (m, id) => channelLink(id))
        .replace(/<@([0-9A-Za-z]+)>/, (m, id) => userLink(id))
        .replace(/<@([0-9A-Za-z]+)\|([0-9A-Za-z]+)>/gi, (m, id) => userLink(id))
        .replace(/<!(channel|everyone|group)>/gi, (m, command) => specialCommand(command));
    }
    return text;
  },
  render() {
    let user = this.props.users[this.props.message.user];
    return (
      <div className="slack-message">
        <div className="slack-message-user-image">
          <img src={user && user.profile.image_32} />
        </div>
        <div className="slack-message-content">
          <div className="slack-message-user-name">{user && user.name}</div>
          <div className="slack-message-date">{this.formatDate(this.props.message.ts)}</div>
          <div className="slack-message-text">{this.formatText(this.props.message.text)}</div>
        </div>
      </div>
    );
  }
});

@@ -329,24 +329,98 @@
 %7Bcommand%7D%60;%0A
+    let uriLink = (uri) =%3E %60%3Ca href=%22$%7Buri%7D%22 target=%22_blank%22%3E$%7Buri%7D%3C/a%3E%60;%0A
     if (text
@@ -419,24 +419,24 @@
 if (text) %7B%0A
-
       return
@@ -816,16 +816,85 @@
 ommand))
+%0A        .replace(/%3C(https?:%5C/%5C/%5B%5E%3E%5D*)%3E/gi, (m, uri) =%3E uriLink(uri))
 ;%0A    %7D%0A
@@ -1420,18 +1420,63 @@
 ge-text%22
-%3E%7B
+%0A            dangerouslySetInnerHTML=%7B%7B__html: 
 this.for
@@ -1508,16 +1508,18 @@
 e.text)%7D
+%7D%3E
 %3C/div%3E%0A 

format http link (oh, it needs dangerous innerHTML :(