// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.

var Client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var Constants = require('../utils/constants.jsx');
var utils = require('../utils/utils.jsx');
var Textbox = require('./textbox.jsx');
var BrowserStore = require('../stores/browser_store.jsx');

module.exports = React.createClass({
    handleEdit: function(e) {
        var updatedPost = {};
        updatedPost.message = this.state.editText.trim();

        if (updatedPost.message.length === 0) {
            var tempState = this.state;
            delete tempState.editText;
            BrowserStore.setItem('edit_state_transfer', tempState);
            $("#edit_post").modal('hide');
            $("#delete_post").modal('show');
            return;
        }

        updatedPost.id = this.state.post_id;
        updatedPost.channel_id = this.state.channel_id;

        Client.updatePost(updatedPost,
            function(data) {
                AsyncClient.getPosts(true, this.state.channel_id);
                window.scrollTo(0, 0);
            }.bind(this),
            function(err) {
                AsyncClient.dispatchError(err, "updatePost");
            }.bind(this)
        );

        $("#edit_post").modal('hide');
        $(this.state.refocusId).focus();
    },
    handleEditInput: function(editText) {
        var newError = this.state.error;

        var len = utils.getLengthOfTextInTextarea(editText);

        if (!this.state.error && len >= Constants.MAX_POST_LEN) {
            newError = 'New message length cannot exceed 4000 characters';
        } else if (this.state.error === 'New message length cannot exceed 4000 characters' && len < Constants.MAX_POST_LEN) {
            newError = '';
        }

        this.setState({editText: editText, error: newError});
    },
    handleEditKeyPress: function(e) {
        if (e.which == 13 && !e.shiftKey && !e.altKey) {
            e.preventDefault();
            this.refs.editbox.getDOMNode().blur();
            this.handleEdit(e);
        }
    },
    handleUserInput: function(e) {
        this.setState({ editText: e.target.value });
    },
    componentDidMount: function() {
        var self = this;

        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
            self.setState({editText: "", title: "", channel_id: "", post_id: "", comments: 0, refocusId: "", error: ''});
        });

        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
            var button = e.relatedTarget;
            self.setState({ editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid') });
        });

        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) {
            self.refs.editbox.resize();
        });
    },
    getInitialState: function() {
        return { editText: "", title: "", post_id: "", channel_id: "", comments: 0, refocusId: "" };
    },
    render: function() {
        var error = this.state.error ? <div className='form-group has-error'><br /><label className='control-label'>{ this.state.error }</label></div> : <div className='form-group'><br /></div>;

        return (
            <div className="modal fade edit-modal" ref="modal" id="edit_post" role="dialog" tabIndex="-1" aria-hidden="true">
              <div className="modal-dialog modal-push-down">
                <div className="modal-content">
                  <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.handleEditClose}><span aria-hidden="true">&times;</span></button>
                    <h4 className="modal-title">Edit {this.state.title}</h4>
                  </div>
                  <div className="edit-modal-body modal-body">
                    <Textbox
                        onUserInput={this.handleEditInput}
                        onKeyPress={this.handleEditKeyPress}
                        messageText={this.state.editText}
                        createMessage="Edit the post..."
                        id="edit_textbox"
                        ref="editbox"
                    />
                    { error }
                  </div>
                  <div className="modal-footer">
                    <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button>
                  </div>
                </div>
              </div>
            </div>
        );
    }
});