// ==UserScript==
// @name         Floating Subs List
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Adds a floating list of subscribed magazines to the left of the page
// @author       raltsm4k
// @match        *://kbin.social/*
// @match        *://fedia.io/*
// @match        *://karab.in/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=kbin.social
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM.setValue
// @grant        GM.getValue
// @license      MIT
// @downloadURL none
// ==/UserScript==

let user;

(function() {
    'use strict';

    const a_login = document.querySelector("#header a.login");
    user = a_login.getAttribute("href");

    if (user !== "/login") {
        const div_head = document.querySelector('#header');
        const div_subs = document.createElement('div');
        const div_subs_s = document.createElement('section');
        const div_subs_c = document.createElement('div');
        const button_recent = Object.assign(document.createElement("a"), {
            className: "icon sort-button",
            id: "sort-recent",
            title: "Sort by recent",
        }).appendChild(Object.assign(document.createElement("i"), {
            className: "fa-solid fa-clock-rotate-left"
        })).parentNode;
        const button_alpha = Object.assign(document.createElement("a"), {
            className: "icon sort-button",
            id: "sort-alpha",
            title: "Sort alphabetically",
        }).appendChild(Object.assign(document.createElement("i"), {
            className: "fa-solid fa-arrow-down-a-z"
        })).parentNode;
        const button_filter = Object.assign(document.createElement("a"), {
            className: "icon sort-button",
            id: "button-filter",
            title: "Filter by name",
        }).appendChild(Object.assign(document.createElement("i"), {
            className: "fa-solid fa-magnifying-glass"
        })).parentNode;
        const input_filter = Object.assign(document.createElement("input"), {
            id: "subs-filter",
            name: "subs-filter",
            type: "text",
            title: "Filter by name",
            style: "display:none;"
        });

        button_recent.addEventListener('click', async () => { await GM_setValue('sort_alpha', false); regen(); });
        button_alpha.addEventListener('click', async () => { await GM_setValue('sort_alpha', true); regen(); });
        button_filter.addEventListener('click', () => {
            const search_box = $('#subs-filter');
            search_box.toggle();
            if (search_box.is(':visible')) {
                $('#button-filter').addClass('active');
                search_box.focus();
            } else {
                $('#button-filter').removeClass('active');
                search_box.val('');
                filter();
            }
        });
        input_filter.addEventListener('input', function() { filter(); });

        GM_addStyle(`#subs-sticky { display: none; }
                 @media only screen and (min-width: 1136px) {
                 #middle .kbin-container {
                     margin: 0 auto 0 max(calc(200px + 1rem), calc(50vw - 720px + 1rem));
                 }
                 #subs-sticky {
                     display: block;
                     position:absolute;
                     top: 100%;
                     left: max(.5rem, calc(50vw - 680px - 200px - 2rem));
                     width: 200px;
                     max-height: calc(100vh - 3.5rem);
                     overflow-y: auto;
                }
                a.sort-button {
                    position: relative;
                    float: right;
                    padding-left: .5rem;
                }
                a.sort-button:hover {
                    cursor: pointer;
                }
                a.sort-button:not(.active) {
                    opacity: 50%;
                }
                a#button-filter {
                    margin-right: -.25rem;
                    padding-right: .25rem;
                    border-right: var(--kbin-meta-border);
                }
                #subs-sticky a {
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     max-width: 100%;
                     overflow-x: hidden;
                     display: inherit;
                }
                #subs-sticky h3 {
                     border-bottom: var(--kbin-sidebar-header-border);
                     color: var(--kbin-sidebar-header-text-color);
                     font-size: .8rem;
                     margin: 0 0 .5rem;
                     text-transform: uppercase;
                }
                #subs-sticky .section {
                     padding: .5rem .5rem 1rem;
                     margin: 0;
                }
                #subs-sticky .section a {
                    color: var(--kbin-meta-link-color);
                }
                #subs-sticky .section a:hover {
                    color: var(--kbin-meta-link-hover-color);
                }
                #subs-sticky ul {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;
                }
                #subs-sticky ul li small {
                    display: none;
                }
                #subs-sticky figure {
                    display: inline;
                    vertical-align: middle;
                }
                #subs-sticky figure, #subs-sticky img {
                    border-radius: 100%;
                }
                #subs-filter {
                    transition: all 0.25s;
                    display: block;
                    padding: .25rem;
                    margin-bottom: .5rem;
                }
                #subs-sticky::-webkit-scrollbar {
                    width: 8px;
                }
                #subs-sticky::-webkit-scrollbar-track {
                    background: var(--kbin-bg-nth);
                }
                #subs-sticky::-webkit-scrollbar-thumb {
                    background: var(--kbin-section-bg);
                }
                #subs-sticky::-webkit-scrollbar-thumb:hover {
                    background: var(--kbin-primary-color);
                }
                }`);

        div_subs_c.className = 'container';

        div_subs_s.className = 'section';
        div_subs_s.appendChild(button_recent);
        div_subs_s.appendChild(button_alpha);
        div_subs_s.appendChild(button_filter);
        div_subs_s.appendChild(Object.assign(document.createElement('h3'), {
            textContent: "Subscribed"
        }));
        div_subs_s.appendChild(input_filter);
        div_subs_s.appendChild(div_subs_c);
        div_subs.appendChild(div_subs_s);

        div_subs.setAttribute('id', 'subs-sticky');
        div_head.appendChild(div_subs);

        regen();
    }
})();

function regen() {
    $('#subs-sticky .container').load(window.location.origin + user + "/subscriptions #content .magazines ul", function(){
        var els = $('#subs-sticky li div');
        els = $('#subs-sticky li');
        els.each(function() {
            const fig = $(this).find('figure');
            const a = $(this).find('a');
            $(this).find('small').remove();
            if (fig.length > 0) {
                fig.find('img').css({'height': '24px', 'width': '24px'});
                a.prepend(fig);
            } else {
                a.prepend(`<figure style="width:24px; height:24px; margin: 0 3px 3px 0; display:inline-block; background-color: rgba(128, 128, 128, 0.5); text-align: center;">
                              <i class="fa-solid fa-newspaper" style="opacity:50%; vertical-align: middle;"></i></figure>`);
            }
            a.removeClass();
        });

        const do_sort = GM_getValue('sort_alpha');
        const button_recent = $('#sort-recent');
        const button_alpha = $('#sort-alpha');
        if (do_sort === true) {
            sort_alpha();
            button_alpha.addClass('active');
            button_recent.removeClass('active');
        } else {
            button_recent.addClass('active');
            button_alpha.removeClass('active');
        }
    });
}

function sort_alpha() {
    const elems = $('#subs-sticky li').detach().sort(function (a, b) {
        return ($(a).text().trim().toLowerCase() < $(b).text().trim().toLowerCase() ? -1
                : $(a).text().trim().toLowerCase() > $(b).text().trim().toLowerCase() ? 1 : 0);
    });
    $('#subs-sticky ul').append(elems);
}

function filter() {
    const filter = $('#subs-filter').val();
    const elems = $('#subs-sticky li');
    elems.each(function() {
        $(this).show();
        if ($(this).text().trim().toLowerCase().indexOf(filter.trim().toLowerCase()) == -1) $(this).hide();
    });
}