// ==UserScript==
// @name         Gitlab Draft Tab
// @namespace    https://brixit.nl/
// @version      0.1
// @description  Split the "Open Merge Requests" in to open and draft tabs
// @author       Martijn Braam
// @match        https://*/*/-/merge_requests*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=gitlab.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function makeUrl(draft) {
        const urlParams = new URLSearchParams(window.location.search);
        urlParams.set('state', 'open');
        urlParams.set('draft', draft);
        return location.pathname + '?' + urlParams;
    }

    function makeTab(name, bubbleCount, url) {
        const tab = document.createElement("LI");
        tab.classList.add("nav-item");

        const a = document.createElement("A");
        a.classList.add("nav-link");
        a.classList.add("gl-tab-nav-item");
        tab.appendChild(a);
        a.href = url;

        const nameSpan = document.createElement("SPAN");
        nameSpan.innerText = name;
        a.appendChild(nameSpan);

        const bubble = document.createElement("SPAN");
        bubble.innerText = bubbleCount;
        bubble.classList.add("gl-badge");
        bubble.classList.add("badge");
        bubble.classList.add("badge-pill");
        bubble.classList.add("badge-muted");
        bubble.classList.add("sm");
        bubble.classList.add("gl-tab-counter-badge");
        bubble.classList.add("gl-display-none");
        bubble.classList.add("gl-sm-display-inline-flex");
        a.appendChild(bubble);

        return tab;
    };

    function makeTabs(state, draft) {
        const tabBar = document.getElementsByClassName("issues-state-filters")[0];
        const oldTab = document.getElementById("state-opened");
        const oldCount = document.querySelector("#state-opened span.badge").innerText;

        oldTab.style.display = 'none';

        let draftCount = '?';
        let openCount = '?';

        if (state == "open") {
            if (draft == "no") {
                openCount = oldCount;
            } else {
                draftCount = oldCount;
            }
        }

        const draftTab = makeTab("Draft", draftCount, makeUrl("yes"));
        const openTab = makeTab("Open", openCount, makeUrl("no"));

        if (state == "open") {
            if (draft == "no") {
                openTab.classList.add("gl-tab-nav-item-active");
            } else {
                draftTab.classList.add("gl-tab-nav-item-active");
            }
        }

        tabBar.prepend(openTab);
        tabBar.prepend(draftTab);
    };

    const body = document.getElementsByTagName('body')[0];
    if (body.dataset.page == 'projects:merge_requests:index') {
        const urlParams = new URLSearchParams(window.location.search);
        const state = urlParams.get('state');
        const draft = urlParams.get('draft');

        if (draft === null && (state === null || state == "open")) {
            // This is the root MR list, redirect to draft==no
            location.href = makeUrl('no');
        } else {
            makeTabs(state, draft);
        }
    }
})();