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

{% block title %}tChat | Accueil{% endblock %}

{% block body %}
    <div class="flex pl-10" style="height: calc(100vh - 100px);">
        <div data-controller="open-post" id="openPost" class="hidden content-center fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-50"></div>
        <div data-controller="open-chat" id="chatDiv" class="hidden w-fit content-center fixed bottom-0 left-10 z-50"></div>
        <div id="createPost" class="hidden content-center fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-50">
            <div class="flex h-full items-center justify-center relative" onclick="creationPostHandleOutsideClick(event)">
                <div id="creationPostContainer" class="bg-white p-8 rounded-xl text-center">
                    <h1 class="text-4xl">Qu'allez-vous partager aujourd'hui ?</h1>
                    <div class="my-4">
                        <textarea id="creationPostContent" placeholder="Il fait beau aujourd'hui..." required class="border rounded-l px-3 py-2 w-full focus:outline-none"></textarea>
                        <div id="image-container" class="mt-4 relative" style="display: none;">
                            <img id="image-preview" class="rounded-lg w-[600px] h-[600px] object-cover" alt="Aperçu de l'image" />
                            <button onclick="deleteImage()" id="remove-image-btn" class="absolute top-0 right-0 mt-2 mr-2 text-white bg-[#f8a9b0] px-4 py-2 rounded-full">X</button>
                        </div>
                    </div>
                    <div class="flex space-x-2 justify-center">
                        <input type="file" id="creationPostImage" name="image" accept="image/*" style="display: none;" />
                        <button id="upload-button" class="bg-[#F0DEE7] rounded-full p-2">📷</button>
                        <button class="bg-[#f8a9b0] text-white px-4 py-2 rounded" onclick="createPost()">Publier</button>
                    </div>
                    <script>
                        document.getElementById('upload-button').addEventListener('click', (event) => {
                            event.preventDefault();
                            document.getElementById('creationPostImage').click(); // Ouvre le sélecteur de fichiers
                        });

                        document.getElementById('creationPostImage').addEventListener('change', (event) => {
                            const file = event.target.files[0];
                            if (file) {
                                const reader = new FileReader();

                                reader.onload = (e) => {
                                    const preview = document.getElementById('image-preview');
                                    preview.src = e.target.result; // Définit la source de l'image
                                    document.getElementById('image-container').style.display = 'block'; // Affiche la balise img
                                };

                                reader.readAsDataURL(file); // Convertit le fichier en URL Data pour l'affichage
                            }
                        });

                        function deleteImage(){
                            document.getElementById('creationPostImage').value = ''; // Réinitialise le fichier sélectionné
                            document.getElementById('image-container').style.display = 'none'; // Masque l'aperçu
                        }

                        async function uploadImage(file) {
                            const fileName = file.name;
                            const extension = fileName.split('.').pop().toLowerCase();

                            // Envoie l'extension manuellement
                            const formData = new FormData();
                            formData.append('image', file);
                            formData.append('extension', extension);  // Ajoute l'extension au FormData

                            const response = await fetch('/upload/image', {
                                method: 'POST',
                                body: formData,
                            });

                            const data = await response.json();
                            if (data.success) {
                                return data.filename; // Retourne le nom de l'image uploadée
                            } else {
                                console.error('Erreur lors de l\'upload de l\'image');
                                throw new Error(data.error);
                            }
                        }

                        async function createPost() {
                            const content = document.getElementById('creationPostContent').value;
                            const imageInput = document.getElementById('creationPostImage');
                            const file = imageInput.files[0];

                            // Étape 1 : Uploader l'image si elle existe
                            let imageFilename = null;
                            if (file) {
                                imageFilename = await uploadImage(file);
                            }
                            
                            // Étape 2 : Envoyer les données du post
                            const response = await fetch('/post/create', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                },
                                body: JSON.stringify({
                                    content: content,
                                    image: imageFilename == null ? null : 'img/postImg/'+imageFilename, // Inclure le nom de l'image
                                }),
                            });

                            const data = await response.json();
                            if (data.message) {
                                // Ajouter le post dans le feed
                                document.getElementById('createPost').classList.add('hidden');
                                const feedDiv = document.getElementById('feedDiv');

                                const newPostHtml = `
                                    <div {{ react_component('Post', {
                                        'image': '${data.image}',
                                        'content': '${data.content}',
                                        'date': '${data.date}',
                                        'username': '${data.username}',
                                        'profilePicture': '${data.profilePicture}',
                                        'likes': '${data.likes}',
                                        'id': '${data.id}',
                                        'liked': '${data.liked}',
                                        'userId': '${data.userId}',
                                        'isFriend': '${data.isFriend}',
                                        'comments': '${data.comments}'
                                    }) }}></div>
                                `;
                                feedDiv.innerHTML = newPostHtml + feedDiv.innerHTML;
                                document.getElementById('creationPostContent').value = '';
                                deleteImage();
                            } else {
                                console.error('Erreur lors de la création du post');
                            }
                        }
                    </script>
                </div>
            </div>
        </div>
        <div class="flex grow py-10 pr-10">
            <div class="flex flex-col bg-[#F0F2F5] px-4 py-10 rounded-lg" style="width:300px;">
                <h1 class="text-4xl text-center">Derniers posts</h1>
                <div data-controller="recent-post" class="mt-5" style="overflow-y:auto; scrollbar-width: none;">
                    <div class="flex grow flex-col" data-recent-post-target="dailyPostSection">
                        <div class="justify-center flex rounded-lg overflow-hidden w-full h-12 mb-4" style="background-color: black">
                            <div class="inset-0 bg-black bg-opacity-30 flex items-center justify-between px-4">
                                <span class="text-xl text-white font-semibold">Dernières 24h</span>
                            </div>
                        </div>
                        {% if daily is not empty %}
                            {% for post in daily %}
                                <div {{ react_component('RecentPost', { 'id': post.id, 'username': post.username, 'image': post.image, 'date': post.date|date('Y-m-d\\TH:i:s')}) }}></div>
                            {% endfor %}
                        {% else %}
                            <p class="text-center mb-5">Aucun post disponible.</p>
                        {% endif %}
                    </div>

                    <div class="flex grow flex-col" data-recent-post-target="weeklyPostSection">
                        
                        <div class="justify-center flex rounded-lg overflow-hidden w-full h-12 mb-4" style="background-color: black">
                            <div class="inset-0 bg-black bg-opacity-30 flex items-center justify-between px-4">
                                <span class="text-xl text-white font-semibold">Cette semaine</span>
                            </div>
                        </div>
                        {% if weekly is not empty %}
                            {% for post in weekly %}
                                <div {{ react_component('RecentPost', { 'id': post.id, 'username': post.username, 'image': post.image, 'date': post.date|date('Y-m-d\\TH:i:s')}) }}></div>
                            {% endfor %}
                        {% else %}
                            <p class="text-center">Aucun post disponible.</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="flex flex-col grow bg-[#F0F2F5] ml-5 rounded-lg py-10 items-center w-fit">
                <div class="flex items-center space-x-2">
                    <h1 class="text-4xl text-center cursor-pointer" onclick="scrollToTop()">Fil d'actualité</h1>
                    <button class="bg-[#f8a9b0] rounded-full text-xl text-white w-[30px] h-[30px]" onclick="document.getElementById('createPost').classList.remove('hidden')">+</button>
                </div>
                <div id="filSelect" class="relative flex w-72 h-12 mt-4 rounded-full bg-gray-200 overflow-hidden" style="min-height: 48px;">
                    <!-- Slider Noir -->
                    <div id="slider" class="absolute w-1/2 h-full bg-black rounded-full transition-transform duration-300 ease-in-out"></div>

                    <!-- Bouton Global -->
                    <p id="global" 
                    class="relative z-10 flex-1 text-center text-white font-semibold cursor-pointer flex items-center justify-center"
                    onclick="changeFilMod('global')">
                        Global
                    </p>

                    <!-- Bouton Contacts -->
                    <p id="contacts" 
                    class="relative z-10 flex-1 text-center text-black font-semibold cursor-pointer flex items-center justify-center"
                    onclick="changeFilMod('contacts')">
                        Contacts
                    </p>
                </div>
                <div data-controller="feed" id="feedDiv" class="mt-5 w-full" style="overflow-y: auto; scrollbar-width: none;">
                    {% for post in posts %}
                        <div {{ react_component('Post', { 'image': post.image, 'content': post.content, 'date': post.date|date('d/m/Y, H:i'), 'username': post.username, 'profilePicture': post.profilePicture , 'likes': post.likes, 'id': post.id, 'liked': post.liked, 'userId': post.userId, 'isFriend': post.isFriend, 'comments': post.comments })}}></div>
                    {% else %}
                        <p>Aucun post pour le moment.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="flex flex-col bg-white" style="width:300px;box-shadow: -5px 0 10px -2px rgb(0 0 0 / 0.1), -3px 0 5px -3px rgb(0 0 0 / 0.05);">
            <div class="p-4">
                <h1 class="text-2xl text-center">Vos contacts</h1>
            </div>
            <div class="px-2" style="overflow-y: auto; scrollbar-width: none;">
                {% set index = 0 %}
                {% for friend in friendList %}
                    <div {{ react_component('FriendList', { 'username': friend.username, 'userId': friend.friend_id, 'profilePicture': friend.profilePicture, 'index': index, 'lastMessage': friend.lastMessage, 'lastMessageUserId': friend.lastMessageUserId }) }}></div>
                    {% set index = index + 1 %}
                {% else %}
                    <p>Vous n'avez aucun ami.</p>
                {% endfor %}
            </div>
        </div>
    </div>
    <script>
        function scrollToTop() {
            const scrollableDiv = document.getElementById('feedDiv');
            if (scrollableDiv) {
                scrollableDiv.scrollTo({ top: 0, behavior: 'smooth' });
            }
        }

        function changeFilMod(mod) {
            const slider = document.getElementById('slider');
            const global = document.getElementById('global');
            const contacts = document.getElementById('contacts');

            if (mod === 'global') {
                slider.style.transform = 'translateX(0)'; // Déplacer à gauche
                global.classList.add('text-white');
                global.classList.remove('text-black');
                contacts.classList.add('text-black');
                contacts.classList.remove('text-white');
            } else if (mod === 'contacts') {
                slider.style.transform = 'translateX(100%)'; // Déplacer à droite
                contacts.classList.add('text-white');
                contacts.classList.remove('text-black');
                global.classList.add('text-black');
                global.classList.remove('text-white');
            }
            const event = new CustomEvent('changeFeedMod', {
                detail: { mod: mod }
            });
            document.dispatchEvent(event);
            console.log("Événement changeFeedMod émis", event);
        }

        function handleOutsideClick(event) {
            const postContainer = document.getElementById('postContainer');
            // Vérifie si le clic est en dehors de postContainer
            if (postContainer && !postContainer.contains(event.target)) {
                const openPost = document.getElementById('openPost');
                openPost.classList.add('hidden'); // Masque l'élément
            }
        }

        function creationPostHandleOutsideClick(event) {
            const creationPostContainer = document.getElementById('creationPostContainer');
            // Vérifie si le clic est en dehors de creationPostContainer
            if (creationPostContainer && !creationPostContainer.contains(event.target)) {
                const createPost = document.getElementById('createPost');
                createPost.classList.add('hidden'); // Masque l'élément
            }
        }
    </script>
{% endblock %}