document.addEventListener('DOMContentLoaded', () => {

    const left = document.querySelector('.left-emoji');
    const right = document.querySelector('.right-emoji');
    const childText = document.getElementById('child-text');
    const heartGif = document.getElementById('heart-gif');
    
    fetch(`http://localhost:8000/emojis/fusion/${id_left}/${id_right}`)
    .then(response => response.json())
    .then(data => {
        child_emoji=data['baby'];
        left.dataset.content=data['mommy'];
        right.dataset.content=data['daddy'];
            function insertEmojiOrImage(el) {
        const value = el.dataset.content;
        console.log(value)
        if (/^https?:\/\//.test(value)) {
            const img = document.createElement('img');
            img.src = value;
            img.className = 'emoji-img';
            el.appendChild(img);
        } else {
            el.textContent = value;
        }
    }

    insertEmojiOrImage(left);
    insertEmojiOrImage(right);

    left.classList.add('slide-in-left');
    right.classList.add('slide-in-right');


    setTimeout(() => {
        

            if (/^https?:\/\//.test(child_emoji)) {
                emojiHtml = `
                    <div class="emoji-glow-img">
                        <img src="${child_emoji}" style="width:64px; height:64px">
                    </div>`;
            } else {
                emojiHtml = `
                    <span class="emoji-glow-text" data-emoji="${child_emoji}">${child_emoji}</span>`;
            }

            childText.innerHTML = `
                <div class="emoji-wrapper">
                    ${emojiHtml}
                    
                </div>`;
            childText.classList.add('growing-animation');
            childText.style.display = 'block';
            heartGif.style.display = 'block';
            heartGif.classList.add('fade-in');

  
    }, 3000);
    })
    .catch(error => {
        console.error('Erreur:', error);
    });
});