var CommentBox = React.createClass({
    loadCommentsFromServer: function () {
        var xhr = new XMLHttpRequest();
        xhr.open("get", this.props.url, true);
        xhr.onload = function () {
            var data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        }.bind(this);
        xhr.send();
    },
    getInitialState: function () {
        return { data: this.props.initialData };
    },
    handleCommentSubmit: function (comment) {
        var comments = this.state.data;
        comment.Id = createGuid();
        var newComments = comments.concat([comment]);
        this.setState({ data: newComments });

        var data = new FormData();
        data.append("Author", comment.Author);
        data.append("Text", comment.Text);
        data.append("Id", comment.Id);

        var xhr = new XMLHttpRequest();
        xhr.open("post", this.props.submitUrl, true);
        xhr.onload = function () {
            this.loadCommentsFromServer();
        }.bind(this);
        xhr.send(data);
    },
    removeComment: function (id) {
        console.log("CommentBox.removeComment: " + id);
        // console.log(id);
        //var xhr = new XMLHttpRequest();
        //xhr.open("post", this.props.deleteUrlx, true);
        //xhr.onload = function () {
        //    //this.loadCommentsFromServer();
        //}.bind(this);
        //xhr.send(id);
    },
    componentDidMount: function () {
        this.loadCommentsFromServer();
        window.setInterval(this.loadCommentsFromServer, this.props.pollInterval);
    },
    render: function () {
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList onRemoveComment={this.removeComment.bind(this)} data={this.state.data} />
            <CommentForm onCommentSubmit={this.handleCommentSubmit} />
          </div>
        );
    }
});

var CommentList = React.createClass({
    render: function () {
        return (
          <div className="commentList">
              {this.props.deleteUrlx}
              {this.props.data.map(comment =>
                <Comment author={comment.Author} key={comment.Id} delComment={this.props.onRemoveComment.bind(this, comment.Id)}>
                    {comment.Text}
                </Comment>
              )}
          </div>
        );
    }
});

var Comment = React.createClass({
    removeCommentTest: function () {
        console.log("Comment.removeCommentTest");
    },
    render: function () {
        var converter = new Showdown.converter();
        var rawMarkup = converter.makeHtml(this.props.children.toString());

        return (
          <div className="comment">
            <h3 className="comment-author">{this.props.author}</h3>
            <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
            <span className="delete-comment" onClick={this.props.delComment}>DELETE</span>
          </div>
      );
    }
});

var CommentForm = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();
        var author = this.refs.author.value.trim();
        var text = this.refs.text.value.trim();
        if (!text || !author) {
            return;
        }
        this.props.onCommentSubmit({ Author: author, Text: text });
        this.refs.author.visible = "";
        this.refs.text.value = "";
        return;
    },
    render: function () {
        return (
          <form className="commentForm" onSubmit={this.handleSubmit}>
              <div>Add new comment</div>
            <input type="text" placeholder="Your name" ref="author" />
            <input type="text" placeholder="Say something..." ref="text" />
            <input type="submit" value="Post" />
          </form>
      );
    }
});

function createGuid() {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
      s4() + '-' + s4() + s4() + s4();
}