// ==UserScript==
// @name         Brouillon AVN
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       TVN
// @match        https://avenoel.org/forum
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const nb_brouillons_max = 10

    let brouillons
    if (localStorage.getItem('brouillons') != null) {
        brouillons = JSON.parse(localStorage.getItem('brouillons'));
    }
    else {
        brouillons = {}
    }
    if (localStorage.getItem('brouillon_temp') != null) {
        brouillons[Object.keys(JSON.parse(localStorage.getItem('brouillon_temp')))[0]] = Object.values(JSON.parse(localStorage.getItem('brouillon_temp')))[0]
        localStorage.removeItem('brouillon_temp')
        localStorage.brouillons = JSON.stringify(brouillons)
    }

    let bool_autokill = false

    const link_brouillon = document.createElement("a")
    link_brouillon.innerHTML = "Brouillon";
    link_brouillon.setAttribute("class", "btn btn-danger")

    const state = document.createElement("span")

    document.querySelector('.preview-btn').after(link_brouillon)
    link_brouillon.after(state)
    constuct_brouillons()

    link_brouillon.addEventListener("click", brouillon);

    async function brouillon() {
        if (document.querySelector('input[name="title"]').value.length < 3) {
            alert('Le champ "titre" doit contenir au moins 3 caractères')
        }
        else if (document.querySelector('.post-content').value < 3) {
            alert('Le champ "contenu" doit contenir au moins 3 caractères')
        }
        else {
            add_brouillon()
        }
    }

    async function add_brouillon() {
        const brouillon_temp = {};
        brouillon_temp[document.querySelector('input[name="title"]').value] = document.querySelector('.post-content').value;
        localStorage.brouillon_temp = JSON.stringify(brouillon_temp);
        console.log(brouillon_temp);
        if (state.innerHTML === "") {
            state.innerHTML = "Brouillon ajouté" }
        else {
            state.innerHTML = "Brouillon mis à jour" }
    }

    function constuct_brouillons() {
        if (Object.keys(brouillons).length >= 1){
            const label = document.createElement("label")
            label.setAttribute("id", "label_brouillons")
            const ul = document.createElement("ul")
            ul.setAttribute("id", "ul_brouillons")
            label.innerHTML = "Brouillons :";
            document.querySelector('.preview').after(label, ul)
            for (const [key, value] of Object.entries(brouillons)) {
                let li = document.createElement("li")
                let a = document.createElement("a")
                let a_supp = document.createElement("a")
                a.addEventListener("click", () => { toggle_brouillon(key, value) });
                a.setAttribute("href", "#")
                a.setAttribute("onclick", "return false")
                a.innerHTML = `${key}`
                a_supp.addEventListener("click", () => { supp_brouillon(li, key) });
                a_supp.setAttribute("href", "#")
                a_supp.setAttribute("onclick", "return false")
                a_supp.innerHTML = "Supprimer"
                li.append(a, " (", a_supp, ")")
                ul.append(li)
            }
        }
    }

    function toggle_brouillon(key, value) {
        document.querySelector('.post-content').value = value
        document.querySelector('input[name="title"]').value = key
    }

    function supp_brouillon(li, key) {
        delete brouillons[key];
        document.querySelector('#label_brouillons').remove();
        document.querySelector('#ul_brouillons').remove();
        constuct_brouillons()
        localStorage.brouillons = JSON.stringify(brouillons);
    }
})();