(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('conversation');
        conversationContainer.scrollTop = conversationContainer.scrollHeight;
    }



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


    // EVENT LISTENERS
    textarea.addEventListener('input', function () {
        // Adjust textarea and button
        adjustTextAreaAndButton(dynamicTextarea, submitButton);
    
        if (!isTyping) {
            osichatSocket.send(JSON.stringify({ 
                'event_type': 'typing', 
                'typing_status': 'typing' 
            }));
            isTyping = true;
        }

        clearTimeout(typingTimeout);
        typingTimeout = setTimeout(function() {
            osichatSocket.send(JSON.stringify({ 
                'event_type': 'typing', 
                '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();
        }
    });

})();