// ==UserScript==
// @name        SPAM
// @version     3.2
// @description So Pictures A Many! ... Shh, it's a perfect acronym. This script will hide a comment when it contains more than 3 images / embeds, with the option to show it anyway. With 6 images or more, it gets deleted.
// @author      Valognir (https://www.deviantart.com/valognir)
// @namespace   https://greasyfork.org/en/scripts/417286-spam
// @run-at      document-start
// @match       *://*.deviantart.com/*
// @exclude     *://*.deviantart.com/*realEstateId*
// @downloadURL none
// ==/UserScript==

// looking to change the numbers or somethin? here you go.
// number of images / embeds within a comment before its content...
// ...gets hidden, with the option to show it anyway.
let hides = 3;

// ...gets deleted.
let yeets = 10;

// that's all, better don't touch the stuff below.

let css = `
.heya, .toggle {
    display: inline-block;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    opacity: .5;
    box-sizing: border-box;
}

.heya {
    font-family: "Comic Sans MS";
    width: 100%;
}

.heya.more {
    width: calc(100% - 57px);
}

.toggle {
    float: right;
    width: 45px;
    border: 1px solid currentColor;
    background: none;
    color: var(--D8);
    font-style: bold;
}

.toggle:hover {
    color: var(--C14);
}

.toggle + div {
    height: 0;
    overflow: hidden;
    transition: all .5s;
    transition-timing-function: ease-in-out;
    transition-delay: .25s;
}

.heya i {
    font-style: italic;
}
`;

const styleNode = document.createElement('style');
const headElement = document.head || document.getElementsByTagName('head')[0];
styleNode.appendChild(document.createTextNode(css));
headElement.appendChild(styleNode);

document.addEventListener('DOMContentLoaded', function() {
    const observer = new MutationObserver(function(mutations) {
        const comments = document.querySelectorAll('[data-hook="comment_body"]:not(.yeeted)');
        comments.forEach(function (element){
            const imgs = element.querySelectorAll('div[data-hook="comment_body"] div[id^="viewer-"]:not(.public-DraftStyleDefault-text-ltr)');
            if (imgs.length >= yeets) {
                element.classList.add('yeeted');
                element.innerHTML = '<span class="heya">spam identified.<br>yeet!</span>';
            } else if (imgs.length >= hides) {
                element.classList.add('yeeted');
                element.insertAdjacentHTML('afterbegin', '<span class="heya more">can\'t <i>picture</i> what\'s in here. wanna check?</span><button class="toggle">Yes</button>');
            }
        });

        const toggleButtons = document.querySelectorAll('.heya+.toggle');

        if (toggleButtons.length > 0) {
            toggleButtons.forEach(function(element) {
                if (!element.classList.contains('click')) {
                    element.classList.add('click');
                    element.addEventListener('click', function () {
                        if (element.nextElementSibling.style.height !== 'auto') {
                            element.nextElementSibling.style.height = 'auto';
                        } else {
                            element.nextElementSibling.style.height = '0px';
                        }
                    });
                }
            });
        }
    });
    observer.observe(document, { childList: true, subtree: true });
});