// ==UserScript==
// @name         Kbin Collapsable Comments
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  On the KBin website, support collapsing and expanding comments
// @author       CodingAndCoffee
// @match        https://kbin.social/m/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=kbin.social
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const COLLAPSE_PARENTS_BY_DEFAULT = true;

    const getNumericId = function (comment) {
        return comment.id.split("-").reverse()[0];
    };

    const getComment = function (numericId) {
        return document.querySelector('#comments blockquote#entry-comment-' + numericId);
    };

    const getChildrenOf = function (numericId) {
        return document.querySelectorAll('#comments blockquote[data-subject-parent-value="' + numericId + '"]');
    }

    const getDescendentsOf = function (numericId) {
        var parent = getComment(numericId);
        var children = getChildrenOf(numericId);

        var descendents = [];
        children.forEach(function (child) {
            descendents.push(child);
            var childDescendents = getDescendentsOf(getNumericId(child));
            childDescendents.forEach (function (cd) {
                descendents.push(cd);
            });
        });
        return descendents;
    };

    window.toggleChildren = function (numericId) {
        var parent = getComment(numericId);

        // get visibility status
        var childrenVisible = (parent.dataset['childrenVisible'] === 'true');
        var toggledStatus = !childrenVisible;

        // update dataset
        parent.setAttribute('data-children-visible', toggledStatus);

        // toggle visibility of the descendents
        var descendents = getDescendentsOf(numericId);
        descendents.forEach(function(c) {
            c.style.display = (toggledStatus ? 'grid' : 'none');
        });

        // update the link text
        var childrenCount = parent.dataset['childrenCount'];
        if (childrenCount > 0) {
            var link = document.querySelector('#comment-'+numericId+'-collapse-link');
            if (link) {
                link.innerHTML = (toggledStatus ? '[- collapse ' + childrenCount + ']' : '[+ show ' + childrenCount + ']');
            }
        }
    };

    const comments = document.querySelectorAll('#comments blockquote.comment');
    comments.forEach(function (comment) {
        var numericId = getNumericId(comment);
        var children = getChildrenOf(numericId);
        var childrenCount = children.length;
        // add some metadata
        comment.setAttribute('data-children-visible', !COLLAPSE_PARENTS_BY_DEFAULT);
        comment.setAttribute('data-children-count', childrenCount);
        if (childrenCount > 0) {
            var header = comment.querySelector('header');
            var span = document.createElement('span');
            var spanSpacer = document.createTextNode(' | ');
            span.append(spanSpacer);
            header.appendChild(span);

            var a = document.createElement('a');
            a.id = 'comment-'+numericId+'-collapse-link';
            var link = document.createTextNode('[- collapse ' + childrenCount + ']');
            a.appendChild(link);
            a.href = 'javascript:window.toggleChildren('+numericId+')';
            span.appendChild(a);
        }
    });

    if (COLLAPSE_PARENTS_BY_DEFAULT) {
        comments.forEach(function (comment) {
            var numericId = getNumericId(comment);

            var isTopLevel = (typeof comment.dataset['subject-parent-value'] !== 'string');
            if (isTopLevel) {
                window.toggleChildren(numericId);
            }
        });
    }
})();