document.addEventListener('DOMContentLoaded', function () {
    // To open and close the emoji picker
    const emojiPicker = document.getElementById('emojiPicker');
    const closeEmojiPicker = document.getElementById('closeEmojiPicker');
    const emojiPickerContainer = document.getElementById('emojiPickerContainer');
    let statusId; 

    emojiPicker.addEventListener('click', function () {
        statusId = emojiPicker.dataset.statusId;
        emojiPickerContainer.classList.remove('hidden');
        console.log(statusId);
    });

    closeEmojiPicker.addEventListener('click', function () {
        emojiPickerContainer.classList.add('hidden');
    });

    // To navigate between categories
    const categories = document.querySelectorAll('.emoji-category');
    const categoryContainers = document.querySelectorAll('.emoji-category-container');

    categories.forEach(category => {
        category.addEventListener('click', function () {
            const selectedCategory = category.dataset.category;
            toggleCategory(selectedCategory);
            categories.forEach(cat => {
                cat.classList.toggle('selectedEmojiCategory', cat === category);
            });
        });
    });

    function toggleCategory(category) {
        categoryContainers.forEach(container => {
            const containerId = container.getAttribute('id');
            container.classList.toggle('hidden', containerId !== `${category}Container`);
        });
    }
});