// ==UserScript==
// @name         dA_FilterNotifications
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  filter notifications by type
// @author       Dediggefedde
// @match        https://www.deviantart.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=deviantart.com
// @grant        GM.addStyle
// @grant        GM.getValue
// @grant        GM.setValue
// @downloadURL none
// ==/UserScript==

//@ts-check
/**
	Adds a bar on deviantart /notification page and sidebar
	The bar provides buttons to filter and search within displayed elements

	TODO: trigger fill if filter reduces elements
*/

(function() {
    "use strict";

    GM.addStyle(`
	#dA_FN_bar{display:flex;position: sticky;top: 0;z-index: 1;background-color: var(--g-bg-primary);}
	#dA_FN_bar>div{cursor:pointer;user-select:none}
	#dA_FN_bar>div:hover{filter: brightness(120%) saturate(150%) invert(20%);}
	#dA_FN_filterText{height: 1.2em;}
	.da_FN_selected{border:1px solid red;}
	.dA_FN_hidden{display:none;}
	.dA_FN_markHidden .dA_FN_hidden{display:block;}
	.dA_FN_markHidden .dA_FN_hidden button{ background-image:repeating-linear-gradient(45deg, #ffffff3b 0%, white 2%, #fdfdfd3b 2%,#c1c1c100 4%, white 4%);}
	.dA_FN_filtered{display:none;}
	#dA_FN_HideSel[active='2'] ellipse { fill: lightgray;}/*2: hiding=grey*/
	#dA_FN_HideSel[active='2'] ellipse[role='iris'] { fill: lightgray;stroke:lightgray}/*2: hiding=grey*/
	#dA_FN_HideSel[active='0'] ellipse[role='iris'] { fill: lightgray;stroke:red} /*0: hide selected=red*/
				.da_fN_notSelect{user-select:none!important}
`);

    //const itemClasses = ["_375AY", "_2TKoM", "_3PCaz", "_2VY4V"]; //possible classes for notification list item div
    const itemClassXPath = "//section//div[@data-bucket]/parent::div";
    let itemClass = "_375AY";
    const filterInterval = 200; //ms
    let filterTimer;
    /**@type {HTMLElement} */
    let cont = null; //container of items

    let selRec = { left: 0, top: 0, width: 0, height: 0 }; //div element of selection rectangle
    let selAnc = { x: 0, y: 0 }; //initial point where you started selecting
    let dragSel = false; //selection rectangle visible

    //button images
    const commBtnSvg = '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M20 3H6.414a1 1 0 00-.707.293L3.293 5.707A1 1 0 003 6.414V16a1 1 0 001 1h3v3a1 1 0 001 1h1.5a1 1 0 00.8-.4L13 17h4.586a1 1 0 00.707-.293l2.414-2.414a1 1 0 00.293-.707V4a1 1 0 00-1-1z"></path></svg>';
    const llamaBtnSvg = '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M17 5v7h1v3h-1v6h-3v-3h-1v3H9v-1H8v-3H7v-2H6v-2h1v-1h1v-1h4V5h-1V4h1V3h2v1h1V3h2v1h1v1h-1z"></path></g></svg>';
    const devBtnSvg = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 3a1 1 0 011 1v15.674a1 1 0 01-1.275.962L12 19l-5.725 1.636A1 1 0 015 19.674V4a1 1 0 011-1h12zm-3 3h-1.763l-.175.183-.832 1.635-.262.182H9v2.497h1.632l.145.181L9 14.182V16h1.763l.176-.183.831-1.635.262-.182H15v-2.497h-1.632l-.145-.183L15 7.818V6z" fill-rule="evenodd"></path></svg>';
    const hideBtn = '<svg width="24" height="24"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 250" stroke-width="20"> <defs> <radialGradient id="c1" cx="0.5" cy="0.5" r="0.5"> <stop offset="0" stop-color="#ffffff" /> <stop offset=".5" stop-color="hsl(40, 60%, 60%)" /> <stop offset="1" stop-color="#3dff3d" /> </radialGradient> </defs> <ellipse role="sclera" cx="250" cy="125" rx="200" ry="100" fill="white"/> <ellipse role="iris" cx="250" cy="125" rx="95" ry="95" stroke="black" fill="url(#c1)"/> <ellipse role="pupil" cx="250" cy="125" rx="50" ry="50" stroke="none" fill="black"/> <ellipse role="light" cx="200" cy="80" rx="50" ry="50" stroke="none" fill="#fffffaee"/> <ellipse role="outline" cx="250" cy="125" rx="200" ry="100" stroke="black" fill="none"/> </svg>'

    const fm = { show: 0, hide: 1, only: 2 }; //filter mode
    //"011-1h16zm-1 2H5v14h14V5zm-4" part of SVG in Journal icon
    //"01.68-.182l.862.505c.2" part of SVG in Shout icon
    const ftext = { //text used as regexp for each filter
        yourComment: ".*Your comment.*",
        yourLlama: ".*(Your (Llama badges|transactions|mentions|watchers))|(011-1h16zm-1 2H5v14h14V5zm-4)|(01.68-.182l.862.505c.2).*",
        yourDevs: "<img",
        text: ".*##ftext##.*"
    };
    let filter = { //applied filter settings. text regexp /i.
        yourComment: fm.show,
        yourLlama: fm.show,
        yourDevs: fm.show,
        text: "",
        version: 0.1
    };
    let showHidden = false; //disable custom hidden buckets
    let hideBuckets = new Set(); //list of buckets to hide from view
    let shiftPressed = false; //shift pressed to prevent selection

    function improveLayout() {
        let sty = document.getElementById("dA_FN_improveCSS");
        if (sty == null) {
            let sty = document.createElement("style");
            sty.id = 'dA_FN_improveCSS';
            sty.innerHTML = `
				div[data-nc] * {visibility: visible;} /* buttons do not vanish*/
				div[data-nc] button[data-hook="user_watch_button"] {display: none;} /*removes watch/unwatch buttons*/
				[aria-label="Remove"] svg:hover {fill: red !important;} /*unify remove buttons hover color*/
				div[data-nc*="favecollect"] > section > div > div:nth-child(2) {display: none;} /*remove activity gallery for new favourites*/
				div[data-nc*="new_watcher"] > section > div > div:nth-child(2) {display: none;} /*remove activity gallery for watchers*/
				div[data-nc*="badge_given"] > section > div > div:nth-child(2) {display: none;} /*remove activity gallery for Llamas*/
				[role="presentation"] {display: none;} /*remove background image from deviation fullview*/
				a[data-hook="deviation_link"] img {object-fit: contain;} /*make thumbnails contain full image*/
									input[type="checkbox"] + div svg { fill: #0000;}
									input[type="checkbox"]:checked + div svg { fill: #000F;}
				`
            document.head.appendChild(sty);
        }

        let it = document.evaluate("//h2[contains(., 'All Notifications')]/parent::div/parent::div/preceding-sibling::*").iterateNext(); //banner behind "all notification"
        if (it != null) {
            it.style.filter = "opacity(0.3) blur(1px)"; //option 1: less dominant title pic
            it.parentNode.parentNode.style.display = "none"; // option 2: no title pic
            it.parentNode.parentNode.nextSibling.style.marginTop = "20px";
        }

        //it=document.querySelectorAll("div[data-nc] div[role]"); //option 1: vanishing buttons now have .dA_fN_notiSideBut
        //[...it].forEach(el=>{
        //    el.classList.add("dA_fN_notiSideBut");
        //    el.nextSibling.classList.add("dA_fN_notiSideBut");
        //    el.nextSibling.nextSibling.classList.add("dA_fN_notiSideBut");
        //});

        it = document.querySelector("div[data-nc]"); //no wasted space on large screens (old limit 1024px)
        if (it != null)
            it.parentNode.style.maxWidth = "unset";

        cont.querySelector("section").style.display = "none";
        // document.evaluate(`//div[@class='${itemClass}']//parent::div//section`).iterateNext().style.display="none"; // remove tutorial ads
    }

    /**
     * btn object, mode fm-mode, texts array of text [3]
     * @param {string} btnId DOM id of button to change title and color
     * @param {number} mode new mode of filter related to button
     * @param {Array<string>} texts title text array [show,hide,only]
     */
    //
    function updateButton(btnId, mode, texts) {
        /** @type {HTMLElement} */
        let btn = document.querySelector(btnId);
        if (btn == null) return;
        switch (mode) {
            case fm.hide:
                btn.style.fill = "grey";
                break;
            case fm.only:
                btn.style.fill = "red";
                break;
            case fm.show:
                btn.style.fill = "";
                break;
        }
        btn.title = texts[mode];
    }

    /** adapts GUI to settings */
    function updateGUI() {
        updateButton("#dA_FN_hideYourCom", filter.yourComment, [
            "Your comments are shown",
            "Your comments are hidden",
            "Only your comments are shown"
        ]);
        updateButton("#dA_FN_hideYourLlama", filter.yourLlama, [
            "Your Correspondence is shown",
            "Your Correspondence are hidden",
            "Only your Correspondence are shown"
        ]);
        updateButton("#dA_FN_hideYourDevs", filter.yourDevs, [
            "Your Deviations are shown",
            "Your Deviations are hidden",
            "Only your Deviations are shown"
        ]);

        /**@type {HTMLDivElement} */
        let hidespan = document.querySelector("#dA_FN_HideSel");
        if (document.getElementsByClassName("da_FN_selected").length == 0) {
            if (showHidden) {
                hidespan.title = "Hide Hidden";
                hidespan.setAttribute("active", "1");
                cont.classList.add("dA_FN_markHidden");
            } else {
                hidespan.title = "Show Hidden";
                hidespan.setAttribute("active", "2");
                cont.classList.remove("dA_FN_markHidden");
            }
        } else {
            if (showHidden) {
                hidespan.title = "Unhide";
            } else {
                hidespan.title = "Hide";
            }
            hidespan.setAttribute("active", "0");
        }
    }

    /**
     * Event Handler Filter Button Click
     * Iterates show-hide-only-show
     * updates GUI, applies filter
     * @param {*} ev Mouse Click Event
     * @param {*} filt related filter in fm
     */
    function btnIterateStateClick(ev, filt) {
        filter[filt] = (filter[filt] + 1) % 3; //iterate: show-hide-only-show

        if (filter[filt] == fm.only) {
            filter.yourComment = fm.show;
            filter.yourDevs = fm.show;
            filter.yourLlama = fm.show;

            filter[filt] = fm.only;
        }

        updateGUI();
        filterDOMList(); //apply filter
        saveSettings();
    }

    /** @type {Array<HTMLElement>} */
    let listEls = [];

    /** refreshes internal list of DOM elements */
    function grabList() {
        listEls = Array.from(document.querySelectorAll(`.${itemClass}`));
    }

    /**
     * Apply filter to DOM elements in listEls
     * Text filter uses regexp.
     * TODO: does not trigger "load more" when list gets smaller than sidebar
     *  */
    function filterDOMList() {
        /** @type {Array<HTMLElement>} */
        let elsA = []; //to be filled with elements to hide
        if (listEls.length == 0) return;

        listEls.forEach(el => {
            el.classList.remove("dA_FN_filtered");
            el.classList.remove("dA_FN_hidden");
        });

        //iterate through filters, Or-Connect list of elements to hide, fill elsA (iterateNext fails if DOM is changed here)
        Object.entries(filter).forEach(fel => {
            if (fel[0] == "text" && fel[1] != "") {
                let reg = new RegExp(fel[1], "i");
                elsA = elsA.concat(
                    listEls.filter(lisEl => {
                        return !reg.test(lisEl.innerHTML);
                    })
                );

            } else {
                let reg = new RegExp(ftext[fel[0]]);
                elsA = elsA.concat(
                    listEls.filter(lisEl => {
                        let regtst = reg.test(lisEl.innerHTML);
                        return (fel[1] == fm.only && !regtst) ||
                            (fel[1] == fm.hide && regtst);
                    })
                );
            }

        });

        //hide elements
        elsA.forEach((el) => {
            el.classList.add("dA_FN_filtered");
        });

        //hide custom hidden elements
        hideBuckets.forEach(el => {
            /**@type{HTMLElement} */
            let bck = document.querySelector(`[data-bucket='${el}']`);
            if (bck == null) return;
            bck = bck.closest(`.${itemClass}`);
            if (bck != null)
                bck.classList.add("dA_FN_hidden");
        });

        //load more if end of list is visible
        var lastBnds = listEls[listEls.length - 1].getBoundingClientRect();
        if (lastBnds.bottom < cont.clientHeight) {
            console.log("load more please!")
                //all shown, load of more required.
                //no idea how to trigger
        }
    }

    function isCollide(a, b, ov) {
        return !(
            ((a.top + a.height + ov) < (b.top)) ||
            (a.top > (b.top + b.height + ov)) ||
            ((a.left + a.width + ov) < b.left) ||
            (a.left > (b.left + b.width + ov))
        );
    }

    /** attachs handlers for selection rectangle and selecting itemClass  */
    function applyDragSelectHandler() {
        //the rectangle
        selRec = document.createElement("div");
        selRec.id = "dA_fM_select";
        selRec.setAttribute("style", "display:none;position:absolute;z-index:1;top:0px;bottom:0px;width:0px;height:0px;background:#a008;");
        document.body.append(selRec);

        let cntCl = `.${cont.className.replace(/\s+/gi,".")}`;

        //starting rectangle
        document.body.addEventListener("mousedown", (ev) => {
            //if (ev.target.closest(cntCl) == null) return;
            if (shiftPressed) return; //no selection when shift is pressed (text-select)
            if (ev.target.closest("#dA_FN_bar") != null) return;
            dragSel = true;
            selAnc.x = ev.clientX;
            selAnc.y = ev.clientY;
            selRec.style.left = selAnc.x + "px";
            selRec.style.top = selAnc.y + "px";
            updateSelection(ev);
            document.getElementById("root").classList.add("da_fN_notSelect");
        }, false);

        //updating rectangle
        document.body.addEventListener("mousemove", (ev) => {
            ev.stopPropagation();
            if (!dragSel) return;
            selRec.style.display = "block";

            if (ev.clientX < selAnc.x)
                selRec.style.left = ev.clientX + "px";
            selRec.style.width = Math.abs(ev.clientX - selAnc.x) + "px";

            if (ev.clientY < selAnc.y)
                selRec.style.top = ev.clientY + "px";
            selRec.style.height = Math.abs(ev.clientY - selAnc.y) + "px";
        }, false);

        //stopping rectangle
        document.body.addEventListener("mouseup", (ev) => {
            dragSel = false;
            selRec.style.display = "none";
            document.getElementById("root").classList.remove("da_fN_notSelect");
        }, false);

        //updating selection
        document.body.addEventListener("mouseenter", updateSelection, true);
        document.body.addEventListener("mouseleave", updateSelection, true);
        document.body.addEventListener("keydown", (ev) => { shiftPressed = ev.shiftKey }, false);
        document.body.addEventListener("keyup", (ev) => { shiftPressed = ev.shiftKey }, false);

    }


    /**
     * checks collision with selection rectangle and updates selection list of .itemClass
     * @param {Event} ev
     */
    function updateSelection(ev) {
        ev.stopPropagation();
        if (!dragSel) return;
        let listels = Array.from(document.querySelectorAll(`.${itemClass}`));
        let bndRec = selRec.getBoundingClientRect();
        // if (bndRec.width == 0 && bndRec.height == 0) return;
        let elRec;
        listels.forEach(el => {
            elRec = el.getBoundingClientRect();
            if (elRec.height == 0) return;
            if (isCollide(bndRec, elRec, 0)) {
                el.classList.add("da_FN_selected");
            } else {
                el.classList.remove("da_FN_selected");
            }
        });
        listels = Array.from(document.querySelectorAll(`[data-nc]`));
        listels.forEach(el => {
            elRec = el.getBoundingClientRect();
            if (elRec.height == 0) return;
            if (isCollide(bndRec, elRec, 0)) {
                if (!el.classList.contains("da_FN_selected"))
                    el.querySelector("input[type=checkbox]").parentNode.click();
                el.classList.add("da_FN_selected");
            } else {
                if (el.classList.contains("da_FN_selected"))
                    el.querySelector("input[type=checkbox]").parentNode.click();
                el.classList.remove("da_FN_selected");
            }
        });

        updateGUI();
    }

    function saveSettings() {
        GM.setValue("filter", JSON.stringify(filter));
        GM.setValue("hidden", JSON.stringify(Array.from(hideBuckets)));
    }

    function loadSettings() {
        GM.getValue("filter", null).then(ret => {
            let pr = JSON.parse(ret);
            if (pr != null && pr.version == "0.1")
                filter = pr;
            return GM.getValue("hidden", null);
        }).then(ret => {
            let pr = JSON.parse(ret);
            if (pr != null) hideBuckets = new Set(pr);
        });
    }

    /** called periodically to insert GUI if not present. Site uses javascript navigation. */
    function starter() {
        if (document.querySelector("#dA_FN_bar") != null) return; //already present

        let xEl = document.evaluate(itemClassXPath).iterateNext();
        if (xEl == null) return; //no place to add filter
        itemClass = xEl.className;

        cont = document.querySelector(`.${itemClass}`).parentElement;

        //add elements.
        let bar = document.createElement("div"); //container bar
        bar.id = "dA_FN_bar";

        let btnYourCom = document.createElement("div"); //button comments
        btnYourCom.id = "dA_FN_hideYourCom";
        btnYourCom.innerHTML = commBtnSvg;
        btnYourCom.addEventListener("click", (ev) => { btnIterateStateClick(ev, "yourComment"); }, false);
        bar.appendChild(btnYourCom);

        let btnYourLlama = document.createElement("div"); //button correspondence
        btnYourLlama.id = "dA_FN_hideYourLlama";
        btnYourLlama.innerHTML = llamaBtnSvg;
        btnYourLlama.addEventListener("click", (ev) => { btnIterateStateClick(ev, "yourLlama"); }, false);
        bar.appendChild(btnYourLlama);

        let btnYourDevs = document.createElement("div"); //button Deviations
        btnYourDevs.id = "dA_FN_hideYourDevs";
        btnYourDevs.innerHTML = devBtnSvg;
        btnYourDevs.addEventListener("click", (ev) => { btnIterateStateClick(ev, "yourDevs"); }, false);
        bar.appendChild(btnYourDevs);

        let spanHide = document.createElement("div");
        spanHide.id = "dA_FN_HideSel";
        spanHide.innerHTML = hideBtn;
        spanHide.addEventListener("click", (ev) => {
            let selected = Array.from(document.getElementsByClassName("da_FN_selected"));
            if (selected.length > 0) { //hide mode
                selected.forEach(el => {
                    let bck = el.querySelector("[data-bucket]");
                    if (bck == null) return;
                    let bckID = bck.getAttribute("data-bucket");
                    if (showHidden) {
                        hideBuckets.delete(bckID);
                    } else {
                        hideBuckets.add(bckID);
                    }
                    el.classList.remove("da_FN_selected");
                });
            } else { //show hidden mode
                showHidden = !showHidden;
            }

            clearTimeout(filterTimer);
            filterTimer = setTimeout(function() {
                filterDOMList();
            }, filterInterval);

            saveSettings();
            updateGUI();

        }, false);
        bar.appendChild(spanHide);

        let editFilterTex = document.createElement("input"); //search Input
        editFilterTex.id = "dA_FN_filterText";
        editFilterTex.type = "text";
        editFilterTex.addEventListener("input", (ev) => { //throttle filterTimer to filterInterval in ms, apply filter
            filter.text = ev.target.value;
            clearTimeout(filterTimer);
            filterTimer = setTimeout(function() {
                filterDOMList();
            }, filterInterval);
            saveSettings();
        }, false);
        bar.appendChild(editFilterTex);


        xEl.parentNode.insertBefore(bar, xEl); //insert container
        bar.nextSibling.style.top = "85px";

        grabList(); //prepare DOM list
        updateGUI(); //display filter setting
        filterDOMList();
        improveLayout();

        //scroll refreshes grablist and needs filter reapplied
        cont.addEventListener("scroll", function() { //throttle filterTimer to filterInterval in ms, apply filter
            if (document.getElementsByClassName(itemClass).length != listEls.length)
                grabList();
            clearTimeout(filterTimer);
            filterTimer = setTimeout(function() {
                filterDOMList();
            }, filterInterval);
        }, false);
        applyDragSelectHandler();
    }

    //start script,
    //insert new elements periodically if not present.
    loadSettings();
    setInterval(starter, 1000);
})();