<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/stylePoursuite.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap" rel="stylesheet">
    <link rel="icon" type="image/icon" href="img/favicon.ico" />
    <title>anti-sutom</title>
</head>
<body>

    <!-- lien pour retourner à l'accueil -->
    <a id="titre" href="/">ANTI-SUTOM</a>

    <!-- données présentes seulement pour le js -->
    <div id="motCache"><%= mot %></div>
    <div id="lettreImpossibleCache"><%=lettreImpossible%></div> 
    <div id="lettrePresenteCache"><%=lettrePresente%></div>

    <!-- nb mots possibles, utilisé dans l'affichage des résultats -->
    <% let long = france.length %> 


    <div id="container_lettreMot">
        <ul id="lettreMot">
            <% for(let i=0;i<mot.length;i++){ %>
                <li class="click-hover click" onclick="afficher(<%= i %>)">
                    <a class="testS">
                        <span class="insideTest">
                            <% if (mot[i]!="$") { %>
                                <!-- ici mettre code de lorsque la lettre est sur -->
                                <%= mot[i] %>
                            <% } else { %>
                                <!-- ici mettre le code de lorsque la lettre est à trouvé -->
                                _                  
                            <% } %> 
                        </span>
                    </a>
                </li>
            <% } %> 
        </ul>
    
        <div id="motConceil">
            <a id="voici">mot le plus optimisé : </a>
            <br>
            <a id="motConceilTxt"><%=motConceil %> </a> 
        </div>

        <div id="param">
            <div id="container_param">
                <div id="texte">
                </div>

                
                <div id="lettrePossible_container">
                    <select name="lettrePossible" id="lettrePresente_select" onchange="changerLien(this.value)">
                        <option value=""> </option>
                        <% for( let i = 0; i < alphabet.length; i++ ) { %>
                            <% if (!lettreImpossible.includes(alphabet[i])) { %>
                                <option value="<%= alphabet[i] %>" href="/"><%= alphabet[i] %></option>                 
                            <% } %>
                        <% } %>
                    </select>
                </div>

                <div id="supprimerLettre">
                    
                    <select name="alphabetComplet" id="alphabetComplet_select" onchange="changerLien(this.value)">
                        <% for( let i = 0; i < "abcdefghijklmnopqrstuvwxyz".length; i++ ) { %>
                            <option value="<%= "abcdefghijklmnopqrstuvwxyz"[i] %>" href="/"><%= "abcdefghijklmnopqrstuvwxyz"[i] %></option>                 
                        <% } %>
                    </select>

                    <button id="deleteButton" class="button">supprimer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="column left bordure">
            <label for="listeLettrePresente">choisir une lettre qui est présente dans le mot forcément</label>
            <ul id="listeLettrePresente">
                <% for( let i = 0; i < alphabet.length; i++ ) { %>
                    <%// if (!lettrePresente.includes(alphabet[i])) { %>
                    <li>
                        <a href="/poursuite/<%=mot%>/<%=lettrePresente+alphabet[i]%>/<%=lettreImpossible%>"> <%=alphabet[i]  %> </a> 
                    </li>
                <% } %>
            </ul>
        </div>

        <div class="column middle" id="mid">
            <div id="french"> 
                <h3><%=long %> 
                <% if (long==1) { %>
                    résultat
                <% } else { %>
                    résultats
                <% } %>
                </h3>
                <% for( let i = 0; i < france.length; i++ ) { %>
                    <b id="<%=i %>" class="listeMotsFrance" onclick="stanislasFail(<%=i %>)"><%=france[i]  %> </b> |
                <% } %>
            </div>
        </div>

        <div class="column right bordure">
            <label for="listeLettreImpossible">choisir une lettre qui n'est pas dans le mot</label>
            <ul id="listeLettreImpossible">
                <% for( let i = 0; i < "abcdefghijklmnopqrstuvwxyz".length; i++ ) { %>
                    <% if (!lettreImpossible.includes("abcdefghijklmnopqrstuvwxyz"[i]) ) { %>
                        <li>
                            <a href="/poursuite/<%=mot%>/<%=lettrePresente%>/<%=lettreImpossible+"abcdefghijklmnopqrstuvwxyz"[i]%>"> <%="abcdefghijklmnopqrstuvwxyz"[i]  %> </a> 
                        </li>
                    <% } %>
                <% } %>
            </ul>
        </div>

    </div>

</body>

<script>

    let mot = document.getElementById('motCache').textContent;
    let lettrePresente = document.getElementById('lettrePresenteCache').textContent;
    let lettreImpossible = document.getElementById('lettreImpossibleCache').textContent;

    let nb = 0;

    let deleteButton = document.getElementById('deleteButton');
    deleteButton.addEventListener('click',enleverLettreMot);

    window.addEventListener('click', function(e){

        if (document.getElementById('lettreMot').contains(e.target) || document.getElementById("container_param").contains(e.target) ){ 
            
        } else{
            document.getElementById("container_param").style.visibility = "hidden";
            document.getElementById("lettrePresente_select").style.visibility = "hidden";
            document.getElementById("alphabetComplet_select").style.visibility = "hidden";
            document.getElementById("supprimerLettre").style.visibility = "hidden";
        }

        if(!document.getElementById('mid').contains(e.target)){
            //let a = document.getElementsByClassName('listeMotsFrance');
            //for(let i=0;i<a.length;i++){
            //    a[i].style.fontSize = "15px";
            //}
        }

    });
    

    function enleverLettrePresente(id){ // fonction pour supprimer une des lettres de la liste des lettresPresentes mais pas utilisé
        lettrePresente = setCharAt(lettrePresente,id,'');
        if(lettreImpossible){
            window.location.href = "/poursuite/"+nMot+"/"+ lettrePresente + "/" + lettreImpossible ;//+ "_" + x;                
        }else{
            window.location.href = "/poursuite/"+nMot+"/"+ lettrePresente;
        }
    }

    function enleverLettreMot(){
        lettrePresente = setCharAt(lettrePresente,lettrePresente.indexOf(mot[nb]),'');
        let nMot = setCharAt(mot,nb,'$');
        
        if(lettreImpossible){
            window.location.href = "/poursuite/"+nMot+"/"+ lettrePresente + "/" + lettreImpossible ;//+ "_" + x;                
        }else{
            window.location.href = "/poursuite/"+nMot+"/"+ lettrePresente;
        }
    }

    function changerLien(param) {
        console.log(param);
        let x = "";
        if(param){
            console.log(x);
            if(mot[nb]!='$'){ // si on modifie une lettre déjà choisi
                x = lettrePresente.indexOf(mot[nb]);
                if(x<0){ //dans le cas où la lettre selectionnée n'est pas dans dans lettrePresente, x vaudra -1
                    lettrePresente = lettrePresente + param;
                }else{
                    lettrePresente = setCharAt(lettrePresente,x,param);
                }
                
            }else{ // si on choisi une nouvelle lettre du mot 
                x = lettrePresente.indexOf(param);
                if(x<0){ // dans le cas où la lettre selectionnée n'est pas dans lettrePresente, x vaudra -1
                    //ajouter la lettre tout simplement
                    lettrePresente = lettrePresente + param;
                }else{
                    if(count(lettrePresente,param)<count(mot,param)+1){ //si il y a plus de fois la lettre dans mot que dans lettre presente
                        //on ajoute la lettre à lettrePresente
                        lettrePresente = lettrePresente + param;
                    }
                }

            }
            let nMot = mot;
            nMot[nb] = param;
            nMot = setCharAt(nMot,nb,param);

            if(lettreImpossible){
                window.location.href = "/poursuite/"+nMot+"/"+ lettrePresente + "/" + lettreImpossible ;                
            }else{
                window.location.href = "/poursuite/"+nMot+"/"+ lettrePresente;
            }
        }
    }

    function afficher(str) {
        nb = parseInt(str);
        let m = document.getElementById('motCache').textContent[nb];
        let a = document.getElementById("lettrePresente_select");
        let b = document.getElementById("alphabetComplet_select");
        let c = document.getElementById("supprimerLettre");
        let res = "_";
        document.getElementById("container_param").style.visibility = "visible";
        if(m==='$'){
            c.style.visibility="hidden";
            b.style.visibility="hidden";
            m = "à trouver";
            a.style.visibility= "visible";
            a.options.selectedIndex = 0;
        }else{
            if(nb==0){
                c.style.visibility="hidden";
            }
            c.style.visibility="visible";
            b.style.visibility="visible";
            b.value = m;
            res = m.toUpperCase();
            a.style.visibility= "hidden";
        }
        document.getElementById("texte").innerHTML = "lettre selectionnée : " + res + " (" + str + ")";        
    }

    function setCharAt(str,index,chr) {
        if(index > str.length-1) return str;
        return str.substring(0,index) + chr + str.substring(index+1);
    }

    function count(str, find) {
        return (str.split(find)).length - 1;
    }

    function stanislasFail(str) {

        let a = document.getElementsByClassName('listeMotsFrance');
        for(let i=0;i<a.length;i++){
            a[i].style.fontSize = "15px";
        }

        document.getElementById(str).style.fontSize = "25px";
    }
</script>
</html>