// ==UserScript==
// @name         [ONCHE] Notes
// @version      1.0.0
// @description  Script pour https://onche.org, permet d'écrire et stoquer des notes sur chaque forumeur.
// @author       Programmafion
// @match        https://onche.org/topic/*
// @downloadURL  https://codeberg.org:programmafion1/onche_notes/raw/branch/main/onche_blacklist.user.js
// @updateURL    https://codeberg.org/programmafion1/onche_notes/raw/branch/main/onche_blacklist.meta.js// @icon         https://risibank.fr/cache/medias/0/5/544/54444/thumb.png
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    GM_addStyle('.mdi-note-outline::before {font-family: "material design icons"; content: "\\F039B";} .mdi-note-plus-outline::before {font-family: "material design icons"; content: "\\F039D";}');

    const {backgroundColor: messageBackgroundColor} = window.getComputedStyle(document.querySelector('.message'));
    const {color: messageColor, fontSize: messageFontSize} = window.getComputedStyle(document.querySelector('.message-content'));

    document.querySelectorAll('.message:not(.answer)').forEach(msg => {
        const author = msg.querySelector('.message-username').textContent.toLowerCase();
        const iconCls = localStorage.getItem(`notes_userscript.${author}`) ? 'mdi-note-outline' : 'mdi-note-plus-outline';
        msg.querySelector('.message-badges').insertAdjacentHTML('beforeend', `<div class="note ${iconCls}" title="Note" style="color: #839ab2; margin-top: 2px; cursor: pointer;">
            <textarea placeholder="pensez à sauvegarder avant de fermer" style="position: absolute; width: 200px; height: 100px; color: ${messageColor}; background-color: ${messageBackgroundColor}; font-size: ${messageFontSize}; border: 1px solid #ccc; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); display: none; z-index: 1;"></textarea>
        </div>`);
        msg.querySelector('.note').addEventListener('click', function() {
            const textAreaEl = this.firstElementChild;
            if (event.target === textAreaEl) {
                return;
            }
            event.stopPropagation();

            msg.style.overflow = 'initial';

            textAreaEl.value = localStorage.getItem(`notes_userscript.${author}`) ?? '';
            textAreaEl.style.display = textAreaEl.style.display === 'block' ? 'none' : 'block';

            document.addEventListener('mousedown', event => {
                if (event.target !== textAreaEl && event.target !== this) {
                    textAreaEl.style.display = 'none';
                    msg.style.removeProperty('overflow');
                }
            });

            textAreaEl.addEventListener('keydown', (event) => {
                if (event.key === 'Enter' && !event.shiftKey) {
                    event.preventDefault();
                    localStorage.setItem(`notes_userscript.${author}`, textAreaEl.value);
                    this.classList.add(textAreaEl.value.length ? 'mdi-note-outline' : 'mdi-note-plus-outline');
                    this.classList.remove(textAreaEl.value.length ? 'mdi-note-plus-outline' : 'mdi-note-outline');
                    textAreaEl.style.backgroundColor = '#28a745';
                    requestAnimationFrame(() => {
                        textAreaEl.style.transition = 'background-color 1s ease-in';
                        textAreaEl.style.backgroundColor = messageBackgroundColor;
                        textAreaEl.addEventListener('transitionend', () => {
                            textAreaEl.style.transition = '';
                        }, {once: true});
                    });
                }
            });
        });
    });
})();