(function() {
    // FUNCTION TO ADJUST TEXTAREA HEIGHT AND SUBMIT BUTTON VISIBILITY
    function adjustTextAreaAndButton(textarea, submitButton) {
        // Adjust the height of the textarea
        if (textarea.value.trim() === '') {
            textarea.style.height = '50px';
        } else {
            textarea.style.height = textarea.scrollHeight + 'px';
        }

        // Display and hide the submit button
        if (textarea.value.trim() === '') {
            submitButton.classList.add('hidden');
        } else {
            submitButton.classList.remove('hidden');
        }
    }

    function scrollBottom() {
        const conversationContainer = document.getElementById('messages_container');
    
        if (conversationContainer) {
            conversationContainer.scrollTo({
                top: conversationContainer.scrollHeight,
                behavior: 'smooth'
            });
        }
    }


    // INITIALIZE ELEMENTS
    const form = document.querySelector('#sendMessage');
    const textarea = document.querySelector('#dynamicTextarea');
    const submitButton = document.getElementById('submitMessageButton');
    const typingUserId = document.getElementById('userId').textContent.trim();
    let typingTimeout;
    let isTyping = false;

    // EVENT LISTENERS
    textarea.addEventListener('input', function () {
        // Adjust textarea and button
        adjustTextAreaAndButton(textarea, submitButton);
        if (!isTyping){
            osichatadminroomSocket.send(JSON.stringify({ 
                'event_type': 'typing',
                'user_id': typingUserId,
                'typing_status': 'typing' 
            }));
            isTyping = true;
        }
    
        clearTimeout(typingTimeout);
        typingTimeout = setTimeout(function() {
            osichatadminroomSocket.send(JSON.stringify({ 
                'event_type': 'typing', 
                'user_id': typingUserId,
                'typing_status': 'stopped_typing' 
            }));
            isTyping = false;
        }, 3000); 
    });
    


    form.addEventListener('submit', (event) => {
        textarea.style.height = '50px';
        submitButton.classList.add('hidden');

        setTimeout(() => {
            scrollBottom();
        }, 100);
    });

    textarea.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            if (!submitButton.classList.contains('hidden')) {
                submitButton.click();
            }
            scrollBottom();
        }
    });

})();