import React from 'react';
import {NavLink} from 'fluxible-router';
import {connectToStores} from 'fluxible-addons-react';
import ContentDiscussionStore from '../../../../stores/ContentDiscussionStore';
import UserProfileStore from '../../../../stores/UserProfileStore';
import Comment from './Comment';
import addComment from '../../../../actions/contentdiscussion/addComment';
import invertCommentBoxFlag from '../../../../actions/contentdiscussion/invertCommentBoxFlag';

class ContentDiscussionPanel extends React.Component {
    handleAddComment(e) {
        e.preventDefault();
        if (this.refs.title.value === '') {
            if (this.refs.commenttext.value === '') {
                $('.ui.form').form('add errors', ['Please enter comment title and text']);
            } else {
                $('.ui.form').form('add errors', ['Please enter comment title']);
            }
        } else if (this.refs.commenttext.value === '') {
            $('.ui.form').form('add errors', ['Please enter comment text']);
        } else {
            this.context.executeAction(addComment, {
                selector: this.props.ContentDiscussionStore.selector,
                title: this.refs.title.value,
                text: this.refs.commenttext.value,
                userid: this.props.UserProfileStore.userid
            });

            this.refs.title.value = '';
            this.refs.text.value = '';
        }
        return false;
    }

    handleInvertCommentBox(e) {
        e.preventDefault();
        this.context.executeAction(invertCommentBoxFlag, {});
        return false;
    }

    render() {
        let oldWay = (
            <div ref="contentDiscussionPanel" className="ui segment">
                Discussion related to {this.props.ContentDiscussionStore.selector.stype} #{this.props.ContentDiscussionStore.selector.sid}.
                <br/>
                <NavLink href={'/discussion/' + this.props.ContentDiscussionStore.selector.stype + '/' + this.props.ContentDiscussionStore.selector.sid}>{'/discussion/' + this.props.ContentDiscussionStore.selector.stype + '/' + this.props.ContentDiscussionStore.selector.sid}</NavLink>
            </div>
        );
        let addComment = (this.props.ContentDiscussionStore.showCommentBox) ?
            (<form className="ui comment form">
                <div className="ui input">
                    <input type="text" ref="title" id="title" name="title" placeholder="Title" aria-required="true"/>
                </div>
                <div className="field">
                    <textarea ref="commenttext" id="commenttext" name="commenttext" style={{minHeight: '6em', height: '6em'}} placeholder="Text" aria-required="true"></textarea>
                </div>
                <div className="ui error message"></div>
                <button tabIndex="0" type="submit" className="ui blue labeled submit icon button" onClick={this.handleAddComment.bind(this)}>
                    <i className="icon edit"></i> Submit
                </button>
                <button tabIndex="0" className="ui blue labeled close icon button" onClick={this.handleInvertCommentBox.bind(this)}>
                    <i className="icon close"></i> Cancel
                </button>
            </form>)
            :
            (<button tabIndex="0" className="ui blue labeled icon button" onClick={this.handleInvertCommentBox.bind(this)}>
                <i className="icon edit"></i> Add comment
            </button>);

        return (
            <div className="ui comments" style={{maxWidth: 'none'}}>
                { (String(this.props.UserProfileStore.userid) !== '') ? addComment : ''}
                <h3 className="ui dividing header">Comments</h3>
                {(this.props.ContentDiscussionStore.discussion.length === 0)
                    ?
                    <div>There are currently no comments for this {this.props.ContentDiscussionStore.selector.stype}.</div>
                    :
                    <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
                        {this.props.ContentDiscussionStore.discussion.map((comment, index) => { return (<Comment key={index} comment={comment} userid={this.props.UserProfileStore.userid} />); })}
                    </div>
                }
            </div>
        );
    }
}

ContentDiscussionPanel.contextTypes = {
    executeAction: React.PropTypes.func.isRequired
};

ContentDiscussionPanel = connectToStores(ContentDiscussionPanel, [ContentDiscussionStore, UserProfileStore], (context, props) => {
    return {
        ContentDiscussionStore: context.getStore(ContentDiscussionStore).getState(),
        UserProfileStore: context.getStore(UserProfileStore).getState()
    };
});
export default ContentDiscussionPanel;

@@ -615,299 +615,18 @@
 lue 
-=== '') %7B%0A            if (this.refs.commenttext.value === '') %7B%0A                $('.ui.form').form('add errors', %5B'Please enter comment title and text'%5D);%0A            %7D else %7B%0A                $('.ui.form').form('add errors', %5B'Please enter comment title'%5D);%0A            %7D%0A        %7D else if (
+!== '' && 
 this
@@ -623,39 +623,32 @@
 '' && this.refs.
-comment
 text.value === '
@@ -642,17 +642,17 @@
 t.value 
-=
+!
 == '') %7B
@@ -656,102 +656,8 @@
 ) %7B%0A
-            $('.ui.form').form('add errors', %5B'Please enter comment text'%5D);%0A        %7D else %7B%0A
     
@@ -853,23 +853,16 @@
 is.refs.
-comment
 text.val
@@ -1090,41 +1090,12 @@
 Box(
-e
 ) %7B%0A
-        e.preventDefault();%0A
     
@@ -1152,38 +1152,16 @@
 g, %7B%7D);%0A
-        return false;%0A
     %7D%0A%0A 
@@ -1968,32 +1968,8 @@
 tle%22
- id=%22title%22 name=%22title%22
  pla
@@ -1985,29 +1985,24 @@
 %22Title%22 
-aria-
 required
 =%22true%22/
@@ -1993,23 +1993,16 @@
 required
-=%22true%22
 /%3E%0A     
@@ -2098,51 +2098,8 @@
 ef=%22
-commenttext%22 id=%22commenttext%22 name=%22comment
 text
@@ -2165,21 +2165,16 @@
 xt%22 
-aria-
 required
 =%22tr
@@ -2173,15 +2173,8 @@
 ired
-=%22true%22
 %3E%3C/t
@@ -2209,65 +2209,8 @@
 iv%3E%0A
-                %3Cdiv className=%22ui error message%22%3E%3C/div%3E%0A
     
@@ -2245,22 +2245,8 @@
 =%220%22
- type=%22submit%22
  cla
@@ -2729,16 +2729,23 @@
 labeled 
+submit 
 icon but

Revert "SWIK-642 Added notifications for empty comment fields"