// ==UserScript==
// @name        kbin collapsible comments
// @match       https://kbin.social/*
// @description collapse comments on kbin
// @version     1.0
// @namespace https://greasyfork.org/users/1096641
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    function getCommentLevel(commentBlock) {
        var matches = commentBlock.className.match(/comment-level--(\d+)/);
        return matches ? parseInt(matches[1]) : null;
    }

    // This function will run for each comment block
    function processComment(commentBlock, allComments, currentIndex) {
        // Find the header, figure (avatar), content and footer within this comment block
        var header = commentBlock.querySelector('header');
        var avatar = commentBlock.querySelector('figure');
        var content = commentBlock.querySelector('.content');
        var footer = commentBlock.querySelector('footer');

        if (header) {  // Ensure the header was found
            // Create a new button with the specified icon
            var button = document.createElement('a');
            button.innerHTML = '<i class="fa-solid fa-chevron-up"></i>';

            // Add a click event to the button
            button.addEventListener('click', function(event) {
                // Toggle height of the comment block and visibility of the avatar when the button is clicked
                if (commentBlock.style.height === '40px') {
                    commentBlock.style.height = '';
                    commentBlock.style.paddingTop = '';
                    avatar.style.display = '';
                    button.innerHTML = '<i class="fa-solid fa-chevron-up"></i>';

                    if (getCommentLevel(commentBlock) === 1) {
                        content.style.display = '';
                        footer.style.display = '';
                    }

                    // Show replies
                    var currentLevel = getCommentLevel(commentBlock);
                    for (var i = currentIndex + 1; i < allComments.length; i++) {
                        var reply = allComments[i];
                        var replyLevel = getCommentLevel(reply);
                        if (replyLevel > currentLevel) {
                            reply.style.display = '';
                        } else {
                            break;
                        }
                    }
                } else {
                    commentBlock.style.height = '40px';
                    commentBlock.style.paddingTop = '0.5rem';
                    avatar.style.display = 'none';
                    button.innerHTML = '<i class="fa-solid fa-chevron-down"></i>';

                    if (getCommentLevel(commentBlock) === 1) {
                        content.style.display = 'none';
                        footer.style.display = 'none';
                    }

                    // Hide replies
                    var currentLevel = getCommentLevel(commentBlock);
                    for (var i = currentIndex + 1; i < allComments.length; i++) {
                        var reply = allComments[i];
                        var replyLevel = getCommentLevel(reply);
                        if (replyLevel > currentLevel) {
                            reply.style.display = 'none';
                        } else {
                            break;
                        }
                    }
                }

                // Prevent the event from propagating to avoid triggering other click events
                event.stopPropagation();
            });

            // Add the button to the header
            header.appendChild(button);
        }
    }

    // Find all comment blocks on the page
    var commentBlocks = Array.from(document.querySelectorAll('blockquote.entry-comment'));

    // Process each comment block
    for (var i = 0; i < commentBlocks.length; i++) {
        processComment(commentBlocks[i], commentBlocks, i);
    }
})();