var loadedItems = 0;

var removeCommentTpl = '<div class="action">' +
        '<a href="#" data-action="remove-comment">Remove</a>' +
        '</div>';

var editCommentTpl = '<div class="action">' +
        '<a href="#" data-action="edit-comment">Edit</a>' +
        '</div>';

var replyCommentTpl = '<div class="action">' +
        '<a href="#" data-action="reply-comment">Reply</a>' +
        '</div>';

var voteCommentTpl = '<div class="action">' +
        '<a href="#" data-action="vote-comment"><i class="fa fa-thumbs-up"></i></a> <span>%votes%</span>' +
        '</div>';

var toggleRepliesTpl = '<div class="action">' +
        '<a href="#" data-action="toggleReplies">Show Replies</a>' +
        '</div>';

var commentTpl = '<div class="comment-item" style="display: none;" data-item="comment" data-item-id="%id%">' +
        '<div class="comment-left">' +
        '<div class="avatar">' +
        '<div class="inner">' +
        '<i class="fa fa-user"></i>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '<div class="comment-right">' +
        '<div class="top-info">' +
        '<span class="username">%username%</span>' +
        '<span class="added-date">%dateAdded%</span>' +
        '</div>' +
        '<div class="comment-body" data-container="comment-body">' +
        '%comment%' +
        '</div>' +
        '<div class="comment-actions">' +
        '%replyComment%' +
        '%voteCommentTpl%' +
        '%editComment%' +
        '%removeComment%' +
        '%showReplies%' +
        '</div>' +
        '<div data-container="reply-wrapper"></div>' +
        '<div data-container="replies">%replies%</div>' +
        '</div>' +
        '</div>';

var notificationTpl = '<div class="notification-col col" data-item="comment">' +
        '<div class="notification alert">%notification%</div>' +
        '</div>';

var editCommentFieldTpl = '<div class="edit-comment">'+
            '<div class="field">'+
            '<div data-field="original-comment" class="original-comment">%originalComment%</div>'+
            '<textarea data-field="edited-comment">%currentComment%</textarea>'+
            '</div>'+
            '<div class="actions">'+
                '<a href="#" class="btn" data-action="save-edit-comment">Save</a>'+
                '<a href="#" class="btn" data-action="cancel-edit-comment">Cancel</a>'+
            '</div>'+
        '</div>';

var replyCommentBodyTpl = '<div class="reply-comment">'+
            '<div class="field">'+
            '<textarea data-field="reply-comment"></textarea>'+
            '</div>'+
            '<div class="actions">'+
                '<a href="#" class="btn" data-action="save-reply-comment">Reply</a>'+
                '<a href="#" class="btn" data-action="cancel-reply-comment">Cancel</a>'+
            '</div>'+
        '</div>';

function addComment(parent) {
    $(document).on('click', '[data-action="add-comment"]', function (e) {
        e.preventDefault();

        var xhr,
                _this = $(this),
                action = 'add-comment',
                performer_site = _this.data('performer-site'),
                performer_name = _this.data('performer-name'),
                parent = _this.data('parent'),
                comment = $('[data-textarea="comment"]').val();

        if (xhr && xhr.readyState() !== 4) {
            xhr.abort();
        }

        xhr = $.ajax({
            url: "../includes/api.comments.php",
            method: "POST",
            dataType: "html",
            data: {
                action: action,
                performer_site: performer_site,
                performer_name: performer_name,
                comment: comment,
                parent: parent
            },
            success: function (data) {
                var res = JSON.parse(data);
                var info = res.info;
                var result = res.result;
                var title;
                if (res.status === 'success') {
                    title = 'Success';
                } else {
                    title = 'Error';

                    $('#infoModal .modal-title').html(title);
                    $('#infoModal .modal-body').html(info);
                    var infoModal = new bootstrap.Modal(document.getElementById('infoModal'));
                    infoModal.show();
                }

                var commentBody = commentTpl;
                var votesBody = voteCommentTpl.replace('%votes%', '0');

                commentBody = commentBody.replace('%id%', result.id).
                        replace('%username%', result.username).
                        replace('%dateAdded%', result.dateAdded).
                        replace('%comment%', result.comment).
                        replace('%replyComment%', '').
                        replace('%replies%', '').
                        replace('%showReplies%', '').
                        replace('%voteCommentTpl%', votesBody).
                        replace('%editComment%', editCommentTpl).
                        replace('%removeComment%', removeCommentTpl);

                $('[data-load="comments"]').prepend(commentBody);
                if ($('[data-load="comments"] .notification-col').length > 0) {
                    $('[data-load="comments"] .notification-col').hide();
                }
                $('[data-item-id="' + result.id + '"]').fadeIn(1000);
                $('[data-textarea="comment"]').val('');

            }
        });
    });
}

function editComment() {
    $(document).on('click', '[data-action="edit-comment"]', function (e) {
        e.preventDefault();

        if($(this).closest('[data-item="comment"]').find('[data-field="edited-comment"]').length > 0){
            $('[data-action="cancel-edit-comment"]').click();
        } else {
            var commentContainer = $(this).closest('[data-item="comment"]').find('[data-container="comment-body"]');
            var commentCurrentValue = $(this).closest('[data-item="comment"]').find('[data-container="comment-body"]').html();
            commentContainer.html(editCommentFieldTpl.replace('%currentComment%',commentCurrentValue).replace('%originalComment%',commentCurrentValue));
        }
    });
    
    $(document).on('click', '[data-action="cancel-edit-comment"]', function (e) {
        e.preventDefault();
        
        var commentContainer = $(this).closest('[data-item="comment"]').find('[data-container="comment-body"]');
        var originalCurrentValue = $(this).closest('[data-item="comment"]').find('[data-field="original-comment"]').html();
        commentContainer.html(originalCurrentValue);
    });
    
    $(document).on('click', '[data-action="save-edit-comment"]', function (e) {
        e.preventDefault();

        var xhr,
        _this = $(this),
        action = 'edit-comment',
        comment_id = _this.closest('[data-item="comment"]').data('item-id'),
        comment = _this.closest('[data-item="comment"]').find('[data-field="edited-comment"]').val();

        if (xhr && xhr.readyState() !== 4) {
            xhr.abort();
        }

        xhr = $.ajax({
            url: "../includes/api.comments.php",
            method: "POST",
            dataType: "html",
            data: {
                action: action,
                comment_id: comment_id,
                comment: comment
            },
            success: function (data) {
                var res = JSON.parse(data);
                
                if (res.status === 'error') {
                    var title = 'Error';
                    var info = res.info;

                    $('#infoModal .modal-title').html(title);
                    $('#infoModal .modal-body').html(info);
                    var infoModal = new bootstrap.Modal(document.getElementById('infoModal'));
                    infoModal.show();
                } else {
                    var commentBody = commentTpl;
                    var votesBody = voteCommentTpl.replace('%votes%', '0');

                    if(res.status === 'success'){
                        _this.closest('[data-item="comment"]').find('[data-container="comment-body"]').html(res.comment);
                        _this.closest('[data-item="comment"]').find('[data-field="original-comment"]').val(res.comment);
                    } else {
                        var originalCurrentValue = _this.closest('[data-item="comment"]').find('[data-field="original-comment"]').html();
                        _this.closest('[data-item="comment"]').find(['data-field="edited-comment"']).val(originalCurrentValue);
                    }
                }
            }
        });
    });
}

function replyComment() {
    $(document).on('click', '[data-action="reply-comment"]', function (e) {
        e.preventDefault();
        if($(this).closest('.comment-right').find('[data-field="reply-comment"]').length < 1){
            $(this).closest('.comment-right').children('[data-container="reply-wrapper"]').append(replyCommentBodyTpl);
        } else {
            $(this).closest('.comment-right').find('.reply-comment').remove();    
        }
    });
    
    $(document).on('click', '[data-action="cancel-reply-comment"]', function (e) {
        e.preventDefault();
        
        $(this).closest('.reply-comment').remove();
    });
    
    $(document).on('click', '[data-action="save-reply-comment"]', function (e) {
        e.preventDefault();

        var xhr,
        _this = $(this),
        action = 'reply-comment',
        performer_site = _this.closest('[data-load="comments"]').data('performer-site'),
        performer_name = _this.closest('[data-load="comments"]').data('performer-name'),
        comment_id = _this.closest('[data-item="comment"]').data('item-id'),
        comment = _this.closest('[data-item="comment"]').find('[data-field="reply-comment"]').val();

        if (xhr && xhr.readyState() !== 4) {
            xhr.abort();
        }

        xhr = $.ajax({
            url: "../includes/api.comments.php",
            method: "POST",
            dataType: "html",
            data: {
                action: action,
                performer_site: performer_site,
                performer_name: performer_name,
                parent: comment_id,
                comment: comment
            },
            success: function (data) {
                var res = JSON.parse(data);
                var info = res.info;
                var result = res.result;
                var title;
                if (res.status === 'success') {
                    title = 'Success';
                } else {
                    title = 'Error';

                    $('#infoModal .modal-title').html(title);
                    $('#infoModal .modal-body').html(info);
                    var infoModal = new bootstrap.Modal(document.getElementById('infoModal'));
                    infoModal.show();
                }

                var commentBody = commentTpl;
                var votesBody = voteCommentTpl.replace('%votes%', '0');

                commentBody = commentBody.replace('%id%', result.id).
                        replace('%username%', result.username).
                        replace('%dateAdded%', result.dateAdded).
                        replace('%comment%', result.comment).
                        replace('%replyComment%', '').
                        replace('%replies%', '').
                        replace('%showReplies%', '').
                        replace('%voteCommentTpl%', votesBody).
                        replace('%editComment%', editCommentTpl).
                        replace('%removeComment%', removeCommentTpl);

                _this.closest('[data-item="comment"]').children('.comment-right').children('[data-container="replies"]').prepend(commentBody);
                $('[data-item-id="' + result.id + '"]').fadeIn(1000);
                _this.closest('[data-item="comment"]').find('.reply-comment').remove();

            }
        });
    });
}

function removeComment() {
    $(document).on('click', '[data-action="remove-comment"]', function (e) {
        e.preventDefault();

        var xhr,
                _this = $(this),
                action = 'remove-comment',
                comment_id = _this.closest('[data-item="comment"]').data('item-id');

        if (xhr && xhr.readyState() !== 4) {
            xhr.abort();
        }

        xhr = $.ajax({
            url: "../includes/api.comments.php",
            method: "POST",
            dataType: "html",
            data: {
                action: action,
                comment_id: comment_id
            },
            success: function (data) {
                var res = JSON.parse(data);
                var likesContainer = _this.closest('.action').find('span');
                var currentLikes = parseInt(likesContainer.html());
                if (res.status === 'success') {
                    _this.closest('[data-item="comment"]').fadeOut(500);
                } else {
                    $('#infoModal .modal-title').html('Error');
                    $('#infoModal .modal-body').html(res.info);
                    var infoModal = new bootstrap.Modal(document.getElementById('infoModal'));
                    infoModal.show();
                }
            }
        });
    });
}

function voteComment() {
    $(document).on('click', '[data-action="vote-comment"]', function (e) {
        e.preventDefault();

        var xhr,
                _this = $(this),
                action = 'vote-comment',
                comment_id = _this.closest('[data-item="comment"]').data('item-id');

        if (xhr && xhr.readyState() !== 4) {
            xhr.abort();
        }

        xhr = $.ajax({
            url: "../includes/api.comments.php",
            method: "POST",
            dataType: "html",
            data: {
                action: action,
                comment_id: comment_id
            },
            success: function (data) {
                var res = JSON.parse(data);
                var likesContainer = _this.closest('.action').find('span');
                var currentLikes = parseInt(likesContainer.html());
                if (res.status === 'added') {
                    likesContainer.html(currentLikes+1);
                } else {
                    likesContainer.html(currentLikes-1);
                }
            }
        });
    });
}

function getComments(from, limit, sort) {

    $('[data-container="loader"]').fadeIn(500);
    $('[data-action="load-more-comments"]').hide();
    var xhr,
            _this = $(this),
            action = 'get-comments',
            commentsContainer = $('[data-load="comments"]'),
            item = $('[data-item="comment"]'),
            performer_site = commentsContainer.data('performer-site'),
            performer_name = commentsContainer.data('performer-name');

    if (xhr && xhr.readyState() !== 4) {
        xhr.abort();
    }

    xhr = $.ajax({
        url: "../includes/api.comments.php",
        method: "POST",
        dataType: "html",
        data: {
            action: action,
            performer_site: performer_site,
            performer_name: performer_name,
            from: from,
            limit: limit,
            sort: sort
        },
        success: function (data) {
            var res = JSON.parse(data);
            var results = res.results;

            var commentBody = commentTpl;

            var commentsList = '';
            if (res.results !== false) {
                $.each(results, function (items, item) {
                    var votesBody = voteCommentTpl.replace('%votes%', item.likes);

                    var removeCommentTplRpl = removeCommentTpl;
                    var editCommentTplRpl = editCommentTpl;
                    var replyCommentTplRpl = replyCommentTpl;
                    var toggleRepliesTplRpl = '';
                    var replies = '';

                    if (item.owner !== 1) {
                        removeCommentTplRpl = '';
                        editCommentTplRpl = ''
                    }
                    
                    if (item.show_reply === false) {
                        replyCommentTplRpl = '';
                    }
                    
                    if(item.replies.length > 0){
                        toggleRepliesTplRpl = toggleRepliesTpl;
                        var replyRemoveCommentTplRpl = removeCommentTpl;
                        var replyEditCommentTplRpl = editCommentTpl;
                        
                        $.each(item.replies, function (key, val) {
                            var replyVotesBody = voteCommentTpl.replace('%votes%', val.likes);
                            
                            if (val.owner !== 1) {
                                replyRemoveCommentTplRpl = '';
                                replyEditCommentTplRpl = ''
                            }

                            if (val.show_reply === false) {
                                replyCommentTplRpl = '';
                            }
                            
                            replies += commentBody.replace('%id%', val.record_num).
                                            replace('%username%', val.name).
                                            replace('%dateAdded%', val.added).
                                            replace('%comment%', val.comment).
                                            replace('%voteCommentTpl%', replyVotesBody).
                                            replace('%editComment%', replyEditCommentTplRpl).
                                            replace('%replyComment%', '').
                                            replace('%replies%', '').
                                            replace('%showReplies%', '').
                                            replace('%removeComment%', replyRemoveCommentTplRpl);
                        });
                    }

                    commentsList += commentBody.replace('%id%', item.record_num).
                            replace('%username%', item.name).
                            replace('%dateAdded%', item.added).
                            replace('%comment%', item.comment).
                            replace('%voteCommentTpl%', votesBody).
                            replace('%editComment%', editCommentTplRpl).
                            replace('%replyComment%', replyCommentTplRpl).
                            replace('%replies%', replies).
                            replace('%showReplies%', toggleRepliesTplRpl).
                            replace('%removeComment%', removeCommentTplRpl);

                });
            } else {
                commentsList = notificationTpl.replace('%notification%', res.info);
            }
            if (results) {
                loadedItems += results.length;
            }

            $('[data-load="comments"]').append(commentsList);
            $('[data-load="comments"]').children('[data-item="comment"]').fadeIn(1000);

            if (loadedItems >= res.total_results) {
                $('[data-container="loader"]').fadeOut(500, function () {
                    $('[data-action="load-more-comments"]').hide();
                });
            } else {
                $('[data-container="loader"]').fadeOut(500, function () {
                    $('[data-action="load-more-comments"]').show();
                });
            }
        }
    });
}

function toggleReplies(){
    $(document).on('click','[data-action="toggleReplies"]', function(e){
        e.preventDefault();
        $(this).closest('[data-item="comment"]').find('[data-container="replies"]').children('[data-item="comment"]').toggle();
        if($(this).html() === 'Show Replies'){
            $(this).html('Hide Replies');
        } else {
            $(this).html('Show Replies');
        }
    });
}

function mbComments() {
    addComment();
    editComment();
    removeComment();
    voteComment();
    replyComment();
    toggleReplies();
    $(document).on('click', '[id="pills-comments-tab"]', function (e) {
        e.preventDefault();
        if ($('[data-item="comment"]').length < 1) {
            var commentsPerLoad = parseInt($('[data-load="comments"]').data('comments-per-load'));
            getComments(0, commentsPerLoad, 'newest');
        }
    });
    $(document).on('click', '[data-action="load-more-comments"]', function (e) {
        e.preventDefault();

        var commentsPerLoad = parseInt($('[data-load="comments"]').data('comments-per-load'));
        var commentsFrom = $('[data-item="comment"]').length;
        var orderBy = $('.comments-order .active [data-action="order-comments"]').data('orderby');
        getComments(commentsFrom, commentsPerLoad, orderBy);
    });
    $(document).on('click', '[data-action="order-comments"]', function (e) {
        e.preventDefault();
        var thisSort = $(this);
        if (!thisSort.parent().hasClass('active')) {
            $('.comments-order li').removeClass('active');
            thisSort.parent().addClass('active');
            $('[data-load="comments"]').fadeOut(300, function () {
                $('[data-load="comments"]').html('');
                var sortBy = thisSort.data('orderby');
                var commentsPerLoad = parseInt($('[data-load="comments"]').data('comments-per-load'));
                loadedItems = 0;
                getComments(0, commentsPerLoad, sortBy);
                setTimeout(function () {
                    $('[data-load="comments"]').fadeIn();
                }, 800);
            });
        }
    });
}