const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
const domain = "192.168.1.106:8000";
const osichatSocketUrl = `${chat_ws_scheme}://${domain}/ws/osichat/`;
const osichatSocket = new WebSocket(osichatSocketUrl);


osichatSocket.onopen = () => {
    console.log('WebSocket connection to osichat established');
};

osichatSocket.onmessage = function (e) {
    const data = JSON.parse(e.data);
    if (data.event_type === 'load_chat') {
        const chatDiv = document.getElementById('osichat');
        const html = data.html;
        chatDiv.innerHTML = html;

        // Append the toggle tag
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = `http://${domain}/static/js/osichat/chat-toggle.js`;
        chatDiv.appendChild(script);


        const startChatContainer = document.getElementById('startChat');
        // If this container exists then the template returned was start-conversation.html, no conversation yet.
        if (startChatContainer) {
            startChatContainer.addEventListener('submit', function (event) {
                event.preventDefault();

                const guestName = event.target.elements.guest_name.value;
                const guestMobileNumber = event.target.elements.guest_mobile_number.value;

                const eventMessage = {
                    'event_type': 'start_conversation',
                    'guest_name': guestName,
                    'guest_mobile_number': guestMobileNumber,
                };

                osichatSocket.send(JSON.stringify(eventMessage));

                event.target.reset();
            });
        }

        const sendMessageContainer = document.getElementById('sendMessage');
        if (sendMessageContainer) {
            sendMessageContainer.addEventListener('submit', function (event) {
                event.preventDefault();
                console.log('i am here')

                const message = event.target.elements.message.value;

                const eventMessage = {
                    'event_type': 'send_message',
                    'message': message,

                };

                osichatSocket.send(JSON.stringify(eventMessage));

                event.target.reset();
            });
        }

    } else if (data.event_type === 'start_conversation') {
        const chatDiv = document.getElementById('startChatContainer');
        const html = data.html;
        chatDiv.innerHTML = html;

    } else if (data.event_type === 'send_message') {
        const messagesDiv = document.getElementById('messages');
        const html = data.html;
        messagesDiv.insertAdjacentHTML('beforeend', html);

    }
};

osichatSocket.onclose = () => {
    console.log('WebSocket connection to osichat closed');
};

osichatSocket.onerror = (error) => {
    console.log('WebSocket error:', error);
};