// -- GESTION DU FORMULAIRE PERMETTANT DE CRÉER SON COMPTE

/// L'utilisateur peut avoir répondu à un quiz avant d'arriver sur la page d'inscription
/// Des ce cas il faut enregistrer son résultat en même temps que les premières informations de son compte (email, ok CGU)
/// Les infos du compte sont complétées (mot de passe, code parrain...) au moment de la validation.

// Fichier de configuration tirés du backend :
import { apiUrl, availableLangs, theme } from "../../config/instance.js";
const lang=availableLangs[0];

const configTemplate = require("../../views/"+theme+"/config/"+lang+".js");// besoin de toutes les déclarations, car appel dynamique : configTemplate[homePage]
const configUsers = require("../../config/users");// idem pour configurer formulaire

// Importation des fonctions utiles au script :
import { getLocaly, removeLocaly, saveLocaly } from "./tools/clientstorage.js";
import { addElement } from "./tools/dom.js";
import { helloDev, updateAccountLink } from "./tools/everywhere.js";
import { getDatasFromInputs, setAttributesToInputs } from "./tools/forms.js";
import { loadMatomo } from "./tools/matomo.js";
import { checkAnswerDatas, checkSession, getTimeDifference } from "./tools/users.js";

// Dictionnaires :
const { serverError } = require("../../lang/"+lang+"/general");
const { alreadyConnected, needUniqueEmail } = require("../../lang/"+lang+"/user");

// Principaux éléments du DOM manipulés :
const btnSubmit=document.getElementById("submitDatas");
const divResponse=document.getElementById("response");
const emailInput=document.getElementById("email");
const myForm=document.getElementById("subscription");

// Test de connexion de l'utilisateur + affichage formulaire d'inscription.
const initialise = async () =>
{
    try
    {
        const isConnected=await checkSession();
        if(isConnected)
        {
            // on change le lien d'accès au compte
            const user=getLocaly("user", true);
            updateAccountLink(user.status, configTemplate);
            myForm.style.display="block";
            myForm.innerHTML="<p class='info'>"+alreadyConnected+"</p>";
        }
        else
        {
            loadMatomo();
            setAttributesToInputs(configUsers, myForm);
            myForm.style.display="block";
        }
    }
    catch(e)
    {
        addElement(divResponse, "p", serverError, "", ["error"]);
        console.error(e);
    }
}
initialise();
helloDev();

// Teste si l'e-mail saisi est déjà utilisé par un autre compte.
// Si c'est le cas, la validation du formulaire est bloquée.
emailInput.addEventListener("blur", function(e)
{
    const emailValue=emailInput.value.trim();
    if(emailValue!=="")
    {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", apiUrl+configUsers.userRoutes+configUsers.checkIfIsEmailfreeRoute);
        xhr.onreadystatechange = function()
        {
            if (this.readyState == XMLHttpRequest.DONE)
            {
                let response=JSON.parse(this.responseText);
                if (this.status === 200 && response.free !== undefined && response.free === false)
                {
                    addElement(document.getElementById("emailMessage"), "div", needUniqueEmail.replace("#URL", configTemplate.connectionPage), "", ["error"]);
                    btnSubmit.setAttribute("disabled", true);
                }
                else
                    btnSubmit.removeAttribute("disabled");
            }
        }
        xhr.setRequestHeader("Content-Type", "application/json");
        const datas={ emailTest:emailValue };
        xhr.send(JSON.stringify(datas));
    }
});
// Supprime l'éventuel message d'erreur déjà injecté si l'utilisateur revient dans le champ :
emailInput.addEventListener("focus", function(e)
{
    document.getElementById("emailMessage").innerHTML="";
});

// Traitement de l'envoi des données d'inscription :
myForm.addEventListener("submit", function(e)
{
    try
    {
        e.preventDefault();        
        const xhr = new XMLHttpRequest();
        xhr.open("POST", apiUrl+configUsers.userRoutes+configUsers.subscribeRoute);
        xhr.onreadystatechange = function()
        {
            if (this.readyState == XMLHttpRequest.DONE)
            {
                let response=JSON.parse(this.responseText);
                if (this.status === 201)
                {
                    myForm.style.display="none";
                    addElement(divResponse, "p", response.message, "", ["success"]);
                    removeLocaly("lastAnswer");// ! important pour ne pas enregister plusieurs fois le résultat.
                }
                else if (response.errors)
                {
                    response.errors = response.errors.join("<br>");
                    addElement(divResponse, "p", response.errors, "", ["error"]);
                }
                else
                    addElement(divResponse, "p", serverError, "", ["error"]);
            }
        }
        xhr.setRequestHeader("Content-Type", "application/json");
        let datas=getDatasFromInputs(myForm);
        if(datas)
        {
            datas.timeDifference=getTimeDifference(configUsers);
            // Si l'utilisateur a précédement répondu à un quiz, j'ajoute les infos de son résultat :
            datas=checkAnswerDatas(datas);
            xhr.send(JSON.stringify(datas));
        }
    }
    catch(e)
    {
        addElement(divResponse, "p", serverError, "", ["error"]);
        console.error(e);
    }
});