"use strict";
/* eslint-disable no-console */
/* exported whoami echo*/
//CLE API : 7bac1d59-3940-5c1b-b171-521266333bde

////////////////////////////////////////////////////////////////////////////////
// CONSTANTES / CONFIGURATION
////////////////////////////////////////////////////////////////////////////////
const local_server = "https://localhost:8443/";
const lifap5_server = "https://lifap5.univ-lyon1.fr/";
const server = lifap5_server || local_server;

const local_todos = "./Projet-2019-topics.json";
const local_users = "./Projet-2019-users.json";

const content_type_header = "Content-Type";
const content_type_value = "application/json";
const x_api_key_header = "x-api-key";
const json=local_server+"/Projet/lifAP5/Projet-2019-users.json";



////////////////////////////////////////////////////////////////////////////////
// ETAT : classe pour gérer l'état courant de l'application
////////////////////////////////////////////////////////////////////////////////
function State(users = [], topics = [], filters = [], sort = "NONE", x_api_key = "7bac1d59-3940-5c1b-b171-521266333bde"){
    // vous êtes libres d'adapter cette classe avec d'autres paramètres pour refléter l'état courant
    this.users = users;
    this.topics = topics;
    this.filters = filters;
    this.sort = sort;
    this.x_api_key = x_api_key;

    function id(id) {
        for(id in this.topics.id) {
            return this.topics.id.index;
        }
    }
}//end State

////////////////////////////////////////////////////////////////////////////////
// OUTILS : fonctions outils, manipulation et filtrage de TODOs
////////////////////////////////////////////////////////////////////////////////

//supprimer tous les handlers (et ceux de ses enfants) en clonant un élément
function clearEventListenerById(id){
    let elt = document.getElementById(id);
    let clone = elt.cloneNode(true);
    elt.parentNode.replaceChild(clone, elt);
    return id;
}

////////////////////////////////////////////////////////////////////////////////
// RENDU : fonctions génération de HTML à partir des données JSON
////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////
// HANDLERS : gestion des évenements de l'utilisateur dans l'interface HTML
////////////////////////////////////////////////////////////////////////////////
function attach_all_handlers(state){

    //on commence par tout vider
    const ids = [
    "identification-link",
    "search-btn",
    "upload-btn",
    "contrib-btn",
    "sujet"
    ];
    ids.map(clearEventListenerById);
    affichage_topic(state);


    // /!\ WARNING api_key_value est une VARIABLE GLOBALE /!\
    document.getElementById("identification-link")
    .addEventListener("click", () => {
        // on modifie l'état
        state.x_api_key = prompt("Saisissez votre clef d'API");
        whoami(state)()
            .then(data => {
                if(data) {
                    //ici faut supprimez le bouton de connexion le remplacer par un bouton de déconexion,affichez le login de l'user
                    removeElementById("identification-link");
                    addBaliseA("navbar-text","Deconexion")

                    alert(`Vous êtes ${data.login}`);
                } 
            })
            .catch(console.error);

        //on réattache les handlers pour qu'ils utilisent tous le nouvel état
        return attach_all_handlers(state);
    }); 
    document.getElementById("search-btn")
    .addEventListener("click", () => alert(document.getElementById("search-text").name));

    document.getElementById("upload-btn")
    .addEventListener("click", () => creezsujet(state));
    document.getElementById("contrib-btn")
    .addEventListener("click", () => alert(document.getElementById("contrib-text").value));

    document.getElementById("sujet")
    .addEventListener("click", () => trieSujet(state));

    document.getElementById("nb")
    .addEventListener("click", () => trieContribution(state));

    document.getElementById("5ca0d49865461e048d66df40")
    .addEventListener("click", () => affichez_debat(state,"5ca0d49865461e048d66df40"));

    document.getElementById("5ca0d49865461e048d66df41")
    .addEventListener("click", () => affichez_debat(state,"5ca0d49865461e048d66df41"));

    document.getElementById("5ca0d49865461e048d66df42")
    .addEventListener("click",() => affichez_debat(state,"5ca0d49865461e048d66df42"));

    document.getElementById("5ca0d49865461e048d66df43")
    .addEventListener("click",() => affichez_debat(state,"5ca0d49865461e048d66df43"));

    document.getElementById("5ca0d49865461e048d66df44")
    .addEventListener("click",() => affichez_debat(state,"5ca0d49865461e048d66df44"));


    document.getElementById("date").addEventListener("click",function() {
        attach_all_handlers(state);
        console.log(echo(state));
    },false);

    // renvoie l'état pour pouvoir être chainée
    return state;
}

function addevent(state) {
    document.getElementById(topic.id)
    .addEventListener("click",() => affichez_debat(state,topic.id));
}

////////////////////////////////////////////////////////////////////////////////
// FETCH Fonction permettant de charger des données asynchrones
////////////////////////////////////////////////////////////////////////////////
function get_local_todos() {
    return fetch(local_todos)
    .then(response => response.json());
}

function get_local_users() {
    return fetch(local_users)
    .then(response => response.json());
}

function get_server_users() {
    fetch(lifap5_server+'users')
        .then(function (response) {
            response.json()
            .then(function (value) {
                console.log(value);
            });
        });
}

function creezsujet(state) {
    console.log(document.getElementById("upload-title").value);
    console.log(document.getElementById("upload-description").value);
    console.log(document.getElementById('upload-open').value);

    data = { 
        "topic" : document.getElementById("upload-title").value,
        "open" : "true",
        "desc" : document.getElementById("upload-description").value
    }

    fetch(lifap5_server+ 'topic/create', { method: 'POST', headers: {"Content-Type": "application/json"}, body:JSON.stringify(data)},)
        .then(response => response.json())
        .catch(console.log("le plan a encore échouer"))
}

const whoami = (state) => () => {
    const url = server + "user/whoami";
    let headers = new Headers();
    headers.set(x_api_key_header, state.x_api_key);
    headers.set(content_type_header, content_type_value);

    let response_ok = false;

    //response.json() renvoie une promesse du corps de la réponse HTTP parsé en json
    // si la requête a réussi (response.ok) elle contient les informations de l'utilisateur authentifié avec sa clef x-api-key
    // sinon (!response.ok) la requête contient un code et un message d'erreur en JSON
    return fetch(url, { method: "GET", headers: headers })
        .then(response => {
            response_ok= response.ok;
            return response.json();
        })
        .then(data => {
            if (response_ok) {
            return data;
            } 
            else {
                throw(new Error(`Erreur dans la requête ${url}: ${JSON.stringify(data)}`));
            }
        });
};

const echo = (_state) => (data) => {
    const url = server + "echo";
    const body = JSON.stringify(data);
    let headers = new Headers();
    headers.set(content_type_header, content_type_value);

    return fetch(url, { method: "POST", headers: headers, body: body })
        .then(function(response) {
            if (response.ok)
            return response.json();
        })
        //ce catch va attraper à la fois les promesses rejetées ET les exceptions
        //on aurait pu écrire reason => console.error(reason), ce qui revient au même
        .catch(console.error); 
};

function formate_topic(topic) {
    return `<div class="row">
                <div class="col-8" ><li><a id=${topic._id}> ${topic.topic}</a></li></div>
                <div class="col-1">${topic.posts.length}</div>
                <div class="col-3">${formate_Date(topic.date)}</div>
            </div>`;
}

function selection_topic(state,id) {
    let i=0;
    while(i<state.topics.length) {
        if(state.topics[i]._id==id) return i;
        else i++;
    }
    return -1;
}

function affichez_debat(state,id) {
    console.log(selection_topic(state,id));
    document.getElementById("titreDebat").innerHTML=formate_titre_debat(state,id);
    document.getElementById("panel-contribs").innerHTML=formate_contrib_desc(state,id);
    console.log(state.topics[selection_topic(state,id)].posts);
    document.getElementById("contrib-list").innerHTML=formate_liste_post(state.topics[selection_topic(state,id)].posts);
}

function formate_titre_debat(state,id) {
    return `<h2 class="text-center">${state.topics[selection_topic(state,id)].topic}</h2>`;
}

function formate_contrib_desc(state,id) {
    return `<ul id="contrib-description" class="list-group">
                <li class="list-group-item">Proposé par : <a href="#">${state.topics[selection_topic(state,id)].user}</a></li>
                <li class="list-group-item">Proposé le : ${state.topics[selection_topic(state,id)].date}</li>
                <li class="list-group-item">Description : ${state.topics[selection_topic(state,id)].desc}</li>
            </ul>
            <div id="contrib-list" class="container-fluid"> 
            </div>`;
}

function formate_liste_post(liste_poste) {
    const post=liste_poste
        .map(formate_poste)
        .join("\n");
    return `${post}`;
}

function formate_poste(post) { //liker et disliker ? 
    return `<div>
                <a href="#">${post.user}</a> le ${formate_Date(post.date)} (${post.likers.length} <i class="far fa-thumbs-up"></i>) (${post.dislikers.length} <i class="far fa-thumbs-down"></i>) 
                <p class="speech-bubble"> ${post.content}</p>
            </div>`;
}
function formate_debat(state,id) {
    return `<div class="col-8">
                <!-- panel contribs-->
                <div id="panel-contribs">

                    </hr>
                    <div id="contrib-list" class="container-fluid"> <!-- -->
                        <div>
                            <a href="#">berenice.bernardin</a> le 2019-03-12 (1 <i class="far fa-thumbs-up"></i>) (2 <i class="far fa-thumbs-down"></i>) 
                            <p class="speech-bubble">Moi je trouve ça très bien car c'est quand même n'importe quoi de valider le S1 avec 15 en danse et 14 en anglais alors qu'on a 8 en programmation !</p>
                        </div>
                        <div>
                            <a href="#">communiste.camarade</a> le 2019-03-12 (3 <i class="far fa-thumbs-up"></i>) (1 <i class="far fa-thumbs-down"></i>) 
                            <p class="speech-bubble"><a href="#">@berenice.bernardin</a> mais tu dis trop nawak ! Si tu prends foot c'est trop chaud d'avoir 15 en sport !</p>
                        </div>
                    </div>
                </div> <!-- panel contribs-->
            </div><!-- column -->` ;
}

function liste_sujet_html( values) {
    const topic_html = values.topics
        .map(formate_topic)
        .join('\n');
    return `<ul>\n${topic_html}</ul>\n`;
}


function nbcontrib(debat) {
    return debat.posts.length;
}

function affichage_topic(liste_sujet) {
    console.log(liste_sujet);
    document.getElementById("topic").innerHTML=liste_sujet_html(liste_sujet);
}

function formate_Date(donne) {
    let date;
    date=donne.slice(0,10);
    console.log(date);
    return date;
    /*.filters(x=> typeof(x)==int);
    donne.substr(0,7);
    console.log(donne);*/
}

function affichage_date(date) {
    // les noms de jours / mois
    var jours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
    var mois = new Array("janvier", "fevrier", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre", "decembre");
    // on recupere la date
    var date = new Date();
    // on construit le message
    var message = jours[date.getDay()] + " ";   // nom du jour
    message += date.getDate() + " ";   // numero du jour
    message += mois[date.getMonth()] + " ";   // mois
    message += date.getFullYear();
    return message;
}

function trie_sujet_alphabetique(a,b) {
    let txta=a.topic;
    let txtb=b.topic;
    if(txta<txtb) return -1;
    if(txta>=txtb) return 1;
}

function trie_sujet_alphabetiqueInv(a,b) {
    let txta=a.topic;
    let txtb=b.topic;
    if(txta<txtb) return 1;
    if(txta>=txtb) return -1;
}

function trieSujet(state) {
    if(state.sort=="NONE" || state.sort=="decroissant") {
        state.topics.sort(trie_sujet_alphabetique);
        state.sort="croissant";
        return attach_all_handlers(state);
    }

    if(values.sort=="croissant") {
        values.topics.sort(trie_sujet_alphabetiqueInv);
        values.sort="decroissant";
        return attach_all_handlers(values);
    }
}

function trieContributionCroissant(a,b) {
    let nb1=a.topics.map.length
    trieContributionCroissant
    a.topics.foreach(function (c) {
        return c.posts.length;
    })
    if(nb1<nb2) return 1;
    else return -1;
}

function trieContribution(state) {
    if(state.sort=="NONE" || state.sort=="decroissant") {
        state.sort(trieContributionCroissant(state.topics));
        state.sort="croissant";
        console.log(state);
        return attach_all_handlers(state);
    }
    if(values.sort=="croissant") {
        values.topics.sort(trie_sujet_alphabetiqueInv);
        values.sort="decroissant";
        return attach_all_handlers(values);
    }
}

/************************************************************** */
/** MAIN PROGRAM */
/************************************************************** */


document.addEventListener("DOMContentLoaded", function() {
    if (!document.getElementById("title-test-projet")) {

        Promise.all([get_local_users(),get_local_todos()])
        .then(values => new State(values[0], values[1]))
        .then(attach_all_handlers)
        .then( console.log(values =>values.id("7bac1d59-3940-5c1b-b171-521266333bde")))
        .catch(reason => console.error(reason));
        }
}, false);

function removeElementById(id) {
    let el = document.getElementById(id);
    el.parentNode.removeChild(el);
}

function addBaliseA(parentid,text) {
    let balise=document.createElement("a");
    balise.id="deco-link";
    balise.innerHTML=text;
    let parent=document.getElementById(parentid);
    parent.insertBefore(balise,null);
    //document.getElementById("deco-link").addEventListener("click", () => alert('vous etes déco ou pas');
}