const openChatButton = document.getElementById('openChatContainer');
const chatWidget = document.getElementById('chatWidget');
const closeChatButton = document.getElementById('closeChatContainer');
const closeMobileChatButton = document.getElementById('closeMobileChatContainer');
const conversation = document.getElementById('conversation');

function scrollToBottom() {
    conversation.scrollTop = conversation.scrollHeight;
}

function toggleBodyScroll(preventScroll) {
    if (preventScroll) {
        document.body.classList.add('no-scroll');
    } else {
        document.body.classList.remove('no-scroll');
    }
}

function checkScreenSize() {
    if (chatWidget.classList.contains('hidden')) {
        return;
    }
    if (window.innerWidth < 798) {
        toggleBodyScroll(true);
    } else {
        toggleBodyScroll(false);
    }
}

openChatButton.addEventListener('click', function () {
    chatWidget.classList.remove('hidden');
    openChatButton.classList.add('hidden');
    closeChatButton.classList.remove('hidden');
    scrollToBottom();
    checkScreenSize();
});

function closeChat() {
    chatWidget.classList.add('hidden');
    openChatButton.classList.remove('hidden');
    if (closeChatButton) {
        closeChatButton.classList.add('hidden');
    } else if (closeMobileChatButton) {
        closeMobileChatButton.classList.add('hidden');
    }
    toggleBodyScroll(false);
}

closeChatButton.addEventListener('click', closeChat);
closeMobileChatButton.addEventListener('click', closeChat);

window.addEventListener('resize', checkScreenSize);

// CSS class to prevent scrolling
const style = document.createElement('style');
style.innerHTML = `
    .no-scroll {
        overflow: hidden;
    }
`;
document.head.appendChild(style);