{% extends 'base.html.twig' %}

{% block title %}Who's | Jeux{% endblock %}

{% block body %}
    <div class="text-center items-center flex grow flex-col">
        <div class="justify-items-center" {{ react_component('Title', { 'title': 'À qui appartient cette sélection ?' }) }}></div>

        {% set current_index = 0 %}

        <div id="choice-container">
            {% for choice in choices %}
                <div id="choice-{{ current_index }}" style="display: {% if loop.first %}block{% else %}none{% endif %};">
                    <div class="flex text-xl justify-center">
                        <p id="top-{{ current_index }}" style="width:150px;padding: 20px 0px; background-color: {% if choice.top == 1 %}#FFD700{% elseif choice.top == 2 %}#C0C0C0{% elseif choice.top == 3 %}#CD7F32{% else %}#808d21{% endif %}; display:none;">
                            {% if choice.top == 1 %}🥇{% elseif choice.top == 2 %}🥈{% elseif choice.top == 3 %}🥉{% endif %}
                            Top {{ choice.top }}
                            {% if choice.top == 1 %}🥇{% elseif choice.top == 2 %}🥈{% elseif choice.top == 3 %}🥉{% endif %}
                        </p>                        
                        <p class="bg-[#1f2223]" style="width:600px;padding: 20px 0px">{{ choice.name }}</p>
                        <p class="bg-[#B4BF5E]" style="width:100px;padding: 20px 0px">{{ choice.note }}</p>
                    </div>
                    <div style="margin-top:60px">
                        <button class="bg-[#1f2223]" style="padding:20px" onclick="showTop({{ current_index }})">Voir le top</button>
                        <button class="bg-[#1f2223]" style="padding:20px" onclick="showAnswer({{ current_index }})">Afficher la réponse</button>
                        <button class="bg-[#1f2223]" style="padding:20px" onclick="nextChoice({{ current_index }})">Enregistrement suivant</button>
                    </div>
                    <div id="answer-{{ current_index }}" style="display: none;margin-top:60px">
                        {% if choice.user == 'Bait top' %}
                        <p class="text-xl">Ce top n'appartenait à personne ! C'était un bait !</p>
                        {% else %}
                        <p class="text-xl">Ce top appartenait à {{ choice.user }} !</p>
                        {% endif %}
                    </div>
                </div>
                {% set current_index = current_index + 1 %}
            {% endfor %}
            <div id="player" class="flex grow flex-col" style="margin-top:100px;">
                <h1 class="text-2xl bg-sky-800 w-fit px-10 py-5 rounded self-center" style="clip-path:polygon(5% 0, 100% 0, 95% 100%, 0 100%);margin-bottom:40px;">Réponses reçues des joueurs</h1>
                <div id="playerAnswer" class="flex"></div>
                <div class="flex justify-center" style="margin-top:40px;">
                    <button class="bg-[#1f2223]" style="padding:20px;margin-right:4px;" onclick="showAnswers()">Afficher les réponses des joueurs</button>
                    <button id="clearResponsesButton" class="bg-[#1f2223]" style="padding:20px" onclick="clearResponses()">Clear les réponses des joueurs</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentIndex = 0;
        const totalChoices = {{ choices|length }};
        let fetchGameInterval = setInterval(fetchGameData, 1000); // Stocker l'intervalle dans une variable

        function showAnswer(index) {
            document.getElementById(`answer-${index}`).style.display = 'block';
        }

        function showAnswers() {
            // Sélectionne tous les éléments ayant la classe "answer"
            const answers = document.querySelectorAll('.answer');

            // Parcourt tous les éléments et modifie leur style
            answers.forEach(answer => {
                answer.style.display = 'flex';
            });

            // Vérifie si l'intervalle existe et le supprime
            if (fetchGameInterval) {
                clearInterval(fetchGameInterval);
                console.log('Interval fetchGameData cleared');
            } else {
                console.warn('fetchGameInterval is not defined or already cleared');
            }
        }

        function showTop(index) {
            document.getElementById(`top-${index}`).style.display = 'block';
        }

        async function nextChoice(index) {
            if (index < totalChoices - 1) {
                // Passer à l'enregistrement suivant
                document.getElementById(`choice-${index}`).style.display = 'none';
                document.getElementById(`choice-${index + 1}`).style.display = 'block';
                currentIndex++;

                // Supprimer les données de la table GameData
                await clearResponses();

                // Relancer l'intervalle
                if (fetchGameInterval) {
                    clearInterval(fetchGameInterval);
                    console.log('Intervalle fetchGameData supprimé.');
                }

                fetchGameInterval = setInterval(fetchGameData, 1000);
                console.log('Intervalle fetchGameData relancé.');
            } else {
                alert('Tous les enregistrements ont été affichés.');
            }
        }

        async function clearResponses() {
            try {
                const response = await fetch('/game/clear', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                });

                if (response.ok) {
                    // Relancer l'intervalle
                    if (fetchGameInterval) {
                        clearInterval(fetchGameInterval);
                        console.log('Intervalle fetchGameData supprimé.');
                    }
                    fetchGameInterval = setInterval(fetchGameData, 1000);
                    console.log('Table GameData cleared.');
                } else {
                    console.error('Erreur lors de la suppression des données GameData.');
                }
            } catch (error) {
                console.error('Une erreur s\'est produite lors de la suppression de GameData :', error);
            }
        }

        function fetchGameData() {
            console.log('fetchData');
            fetch('/game/data') // La route définie dans le contrôleur
            .then(response => response.json())
            .then(data => {
                const playerAnswerDiv = document.getElementById('playerAnswer');
                playerAnswerDiv.innerHTML = ''; // Efface le contenu précédent

                data.forEach(entry => {
                    const entryDiv = document.createElement('div');
                    entryDiv.classList.add('text-xl', 'p-4', 'bg-[#1f2223]', 'flex', 'grow', 'justify-center', 'mx-2');
                    entryDiv.innerHTML = `
                        <div>
                            <p>❓ ${entry.user} ❓</p>
                            <p class="answer justify-center">➡️ ${entry.content}</p>
                        </div>
                    `;
                    playerAnswerDiv.appendChild(entryDiv);
                });
            })
            .catch(error => console.error('Erreur lors de la récupération des données :', error));
        }
    </script>

{% endblock %}