import './frCommentFlaggerComponent';
import '../vendor/jquery.timeago';
import '../vendor/jquery.scrollTo-min';
import '../vendor/tiny-pubsub';
import commentVote from './commentVote';

/**
 *  FootyRoom Comments Module
 */
let Comments = (function ($) {
    var el;
    var elCommentList;
    var elAllComments;
    var elLoadMore;

    var system = (window.location.toString().indexOf('/forum') > -1) ? 'forum' : 'comments';

    var discussionId;
    var cursor = {};
    var filter;
    var without;

    $(document).ready(function () {
        init();

        const commentId = $.QueryString.commentId;

        if (commentId) {
            setTimeout(function () {
                $('body').scrollTo('#comment' + commentId);
            }, 0);
        }
    });

    function init() {
        // Cache the dom objects.
        el = $('#' + system);
        elCommentList = el.find('.comment-list');
        elAllComments = el.find('.all-comments');
        elLoadMore = el.find('.load-more-comments');

        loadJsonData();
        setUpComments();
        enableLoadMore();
        filterBadWords();

        $.subscribe('fr.commenter.edited', onCommentEdited);

        if (system == 'comments') {
            $.subscribe('fr.commenter.posted', insertNewComment);
        }
    }

    function loadJsonData() {
        if ($('#comments-json-data').html() == undefined) {
            return;
        }

        var jsonData = $.parseJSON($('#comments-json-data').html());

        if (jsonData) {
            cursor = jsonData.cursor;
            discussionId = jsonData.discussionId;
            filter = jsonData.filter || 'all';
            without = jsonData.without;
        }

        // remove it becuase we need this id available for next set of data
        $('#comments-json-data').remove();
    }

    function hideLoadMore() {
        elLoadMore.hide();
    }

    function showLoadMore() {
        elLoadMore.show();
    }

    function enableLoadMore() {
        if (cursor.next) {
            elLoadMore.click(loadMoreClick);
            elLoadMore.addClass('enabled');
            showLoadMore();
        } else {
            hideLoadMore();
        }
    }

    function disableLoadMore() {
        elLoadMore.unbind('click');
        elLoadMore.removeClass('enabled');
    }

    function loadMoreClick() {
        disableLoadMore();
        loadMore();
    }

    function loadMore() {
        getComments(function (res) {
            elAllComments.append(res);
            loadJsonData();
            enableLoadMore();
            filterBadWords();
        });
    }

    function getComments(callback) {
        $.ajax({
            url: '/comments-pagelet',
            data: {discussionId: discussionId, cursor: cursor.next, since: cursor.since, filter: filter, without: without},
            success: callback,
        });
    }

    function insertNewComment(view, commentId, parentId) {
        if (parentId > 0) {
            var insertAfter = $('#comment' + parentId, el).nextUntil(':not(.reply-comment)').last();

            if (insertAfter.length < 1) {
                insertAfter = $('#comment' + parentId, el);
            }

            insertAfter.after(view);
        } else {
            elAllComments.prepend(view);
        }

        $('body').scrollTo('#comment' + commentId, 300, {offset: {top: -150}});
        $('#comment' + commentId)
        .animate({opacity: 0.25}, 500).animate({opacity: 1}, 500)
        .animate({opacity: 0.25}, 500)
        .animate({opacity: 1}, 500);
    }

    function onCommentEdited(commentId, view) {
        if (system == 'forum') {
            window.location.reload();
            return;
        }

        $('.comment-history[data-commentId=' + commentId + ']').remove();
        $('#comment' + commentId, el).replaceWith(view);
    }

    function approvePost(postID, commentID) {
        $.post('/forum/discussions/' + postID + '/status', {
            status: 'publish',
        })
    
        .success(function (response) {
            approveComment(commentID);
        });
    
        $('.comment[postid="' + postID + '"]').css('background', '#fff');
    }

    function approveComment(commentID) {
        $.post('/comments/' + commentID + '/approval', {
            approved: true,
        });
    
        $('#comment' + commentID).css('background', '#fff');
    }

    function removePost(postID, commentID, reason) {
        $.post('/forum/discussions/' + postID + '/status', {
            status: 'draft',
        })
    
        .success(function (response) {
            removeComment(commentID, reason);
        });
    
        $('.comment[postid="' + postID + '"]').css('background', '#F33');
    }

    function removeComment(commentID, reason) {
        $.post('/comments/' + commentID + '/approval', {
            approved: false,
            reason: reason,
        });
    
        $('#comment' + commentID).css('background', '#F33');
    }

    function postSettings(commentID) {
        var comment = $('#comment' + commentID);
        var settings = _.template($('#post-settings-template').html());
        $(comment).after(settings({
            commentID: commentID,
        }));
        var postID = $(comment).attr('postID');
    
        $('#post-settings .settings-confirm').click(function () {
            var data = $('#post-settings form').serialize();
    
            $.post('/forum/discussions/' + postID + '/settings', data)
    
            .success(function (response) {
                window.location.reload();
            })
    
            .error(function () {
                alert('Something went wrong. Try again.');
            });
        });
    
        $('#post-settings .settings-cancel').click(function () {
            $('#post-settings').remove();
            $('.cm-settings').click(function () {
                postSettings($(this).closest('.comment').attr('commentID'));
                $(this).unbind('click');
            });
        });
    }

    /* Sets up comments menus and other features. */
    function setUpComments() {
        $('.timeago', el).timeago();

        elCommentList.on('click', '.js-show-comment-dropdown', function (event) {
            var dropdownEl = $(this).closest('.comment').find('.comment-dropdown');

            dropdownEl.toggle();

            event.stopPropagation();

            $(document).one('click', function () {
                dropdownEl.hide();
            });
        });

        elCommentList.on('click', '.js-vote-up', function () {
            commentVote($(this).closest('.comment').attr('commentID'), 1, $(this).closest('.comment').attr('postID'));
        });

        elCommentList.on('click', '.js-vote-down', function () {
            commentVote($(this).closest('.comment').attr('commentID'), -1, $(this).closest('.comment').attr('postID'));
        });

        elCommentList.on('click', '.js-comment-reply', function () {
            var commentID = $(this).closest('.comment').attr('commentID');
            $.publish('fr.comments.reply', [commentID]);
        });

        elCommentList.on('click', '.cm-approve', function () {
            var elComment = $(this).closest('.comment');

            if (typeof elComment.attr('postID') !== 'undefined') {
                approvePost(
                    elComment.attr('postID'),
                    elComment.attr('commentID')
                );
            } else {
                approveComment(elComment.attr('commentID'));
            }
            $('.comment-dropdown').hide();
        });

        elCommentList.on('click', '.cm-remove', function () {
            var elComment = $(this).closest('.comment');
            var wizardTmpl = $('#comment-remove-wizard-template');

            if (elComment.find('.comment-remove-wizard').length) {
                return;
            }

            if (!wizardTmpl.length) {
                return removeComment(elComment.attr('commentID'), '');
            }

            var wizard = $(wizardTmpl.html());

            elComment.append(wizard);

            wizard.find('.js-cancel').click(function () {
                wizard.remove();
            });

            wizard.find('.js-ok').click(function () {
                if (typeof elComment.attr('postID') !== 'undefined') {
                    removePost(
                        elComment.attr('postID'),
                        elComment.attr('commentID'),
                        wizard.find('.reason').val()
                    );
                } else {
                    removeComment(
                        elComment.attr('commentID'),
                        wizard.find('.reason').val()
                    );
                }

                wizard.remove();
            });
            $('.comment-dropdown').hide();
        });

        elCommentList.on('click', '.cm-revise', function () {
            var commentID = $(this).closest('.comment').attr('commentID');
            var discussionId = $(this).closest('.comment').attr('discussionId');

            if (discussionId.indexOf('forumPost') >= 0) {
                return;
            }

            $.publish('fr.comments.edit', [commentID]);
            $('.comment-dropdown').hide();
        });

        elCommentList.one('click', '.cm-settings', function () {
            postSettings($(this).closest('.comment').attr('commentID'));
            $(this).unbind('click');
            $('.comment-dropdown').hide();
        });

        elCommentList.on('click', '.cm-edited', function () {
            var commentId = $(this).closest('.comment').attr('commentID');
            $('.comment-history[data-commentId=' + commentId + ']').toggle();
            $('.comment-dropdown').hide();
        });

        elCommentList.on('click', '.cm-flag', function () {
            var commentId = $(this).closest('.comment').attr('commentID');
            flagComment(commentId);
        });

        (function () {
            var showing = false;
            elCommentList.on('click', '.bad-comment-notice a', function () {
                $(this).parent().parent().find('.comment-content')
                .toggle();
                showing = !showing;

                if (showing) {
                    $(this).html('(hide)');
                } else {
                    $(this).html('(show)');
                }
            });
        }());

        elCommentList.on('click', '.cm-ban', function () {
            $('html').scope().openBanModal(this.dataset.userId);
            $('.comment-dropdown').hide();
        });

        elCommentList.on('click', '.cm-voters', function () {
            const commentEl = $(this).closest('.comment');
            const commentId = commentEl.attr('commentID');

            $.get('/vote/votes.json', { pollRef: `comment-karma-${commentId}` }, function (response) {
                const users = response.data.map((vote) => {
                    return `<span ${vote.value === 1 ?
                        'class="comment-voter"' :
                        'class="comment-voter comment-voter--downvote"'}>${vote.username}</span>`;
                });

                commentEl.find('.comment-voters').html(users.join(''));
            });
        });

        /**
         * Show parent comment in top comments feature.
         */
        $('.comment-list > .reply-comment').each(function () {
            var commentId = $(this).attr('commentId');

            $('<div class="show-parent-comment">Click here to see parent comment</div>')
            .insertBefore(this)
            .click(function () {
                $(this).remove();
                $.get('/comments/' + commentId + '/parent-pagelet').then(function (response) {
                    $(response).insertBefore('#comment' + commentId);
                });
            });
        });

        elCommentList.on('click', '.comment-text img:not(.poll-image)', function () {
            window.open($(this).attr('src'), '_blank');
        });
    }

    function filterBadWords() {
        var filter = ['fuck', 'fucker', 'fucking', 'nigger', 'niger', 'niggers', 'nigers', 'cunt', 'pussy', 'bitch', 'whore', 'motherfucker', 'shit'];
        var pattern = new RegExp('(")?\\b(' + filter.join('|') + ')\\b', 'gi');

        elCommentList.find('.comment-text *').each(function () {
            var el = $(this);

            if (!el.children().length) {
       			el.html(el.html().replace(pattern, function ($0, $1) {
                    return $1 ? $0 : '<span title="' + $0 + '">' + Array($0.length + 1).join('*') + '</span>';
                }));
       		}
        });
    }

    function flagComment(commentID) {
        var modal = angular.injector(['ng', 'footyroom']).get('$uibModal');
    
        modal.open({
            template: '<fr-comment-flagger comment-id="' + commentID + '" dismiss="$dismiss()"></fr-comment-flagger>',
        });
    }

    return {};
}(jQuery));