// ==UserScript==
// @name         Show trello card number
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @description  Show the card number in the card title.
// @author       Grégory M. Esberci
// @match        https://trello.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=trello.com
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const getCardNumber = (url) => {
        return url.split('/').reverse()[0].split('-')[0];
    }

    const setNumberInCard = (card) => {
        const titleClassName = 'show-trello-card-number-card-title';

        const title = card.querySelector('[data-testid=card-name]');
        const cardNumberElement = title.getElementsByClassName(titleClassName)[0] || document.createElement('b');

        const cardNumber = getCardNumber(title.href);

        cardNumberElement.className = titleClassName;
        cardNumberElement.textContent = `(${cardNumber}) `;

        if (!title.contains(cardNumberElement)) {
            title.prepend(cardNumberElement)
        }
    }


    const setNumberInModalTitle = (title) => {
        const titleClassName = 'show-trello-card-number-modal-title quiet';

        const cardNumberElement = title.parentNode.getElementsByClassName(titleClassName)[0] || document.createElement('h2');

        const cardNumber = getCardNumber(location.href);

        cardNumberElement.className = titleClassName;
        cardNumberElement.textContent = `#${cardNumber}`;


        if (!title.parentNode.contains(cardNumberElement)) {
            title.parentNode.prepend(cardNumberElement)
        }
    }


    const observer = new MutationObserver(function(mutations) {
        document.querySelectorAll("[data-testid=trello-card]:not(:has(.custom-card-title))").forEach(setNumberInCard);

        const modalTitle = document.querySelector('[data-testid=card-back-title-input]');
        if (modalTitle) setNumberInModalTitle(modalTitle);
    });


    observer.observe(document.body, { childList: true, subtree: true });
})();