import {showToast} from "./toast.js";

export const sendMessage = async (element, event) => {
    event.preventDefault();
    const messageInput = element.querySelector('[name="message"]');
    const message = messageInput.value;
    if (!message) return;

    const recipentId = element.dataset.recipientId;
    messageInput.value = '';

    // Capture the ID of the UI element we just added
    const tempMessageId = addMessageToChat({message: message}, true);

    try {
        await axios.post(`/api/chat/${recipentId}/message`, {message: message});
    } catch (e) {
        console.error(e);
        showToast('Message could not be sent.');

        const failedMessage = document.getElementById(tempMessageId);
        if (failedMessage) {
            failedMessage.remove();
        }

        messageInput.value = message;
    }
}

export const addMessageToChat = (message, right = false) => {
    const chatContainer = document.getElementById('chat-container');
    if (!chatContainer) return;

    const tempId = 'msg-' + Date.now();

    const placeholder = chatContainer.querySelector('#no-messages-placeholder');
    if (placeholder) placeholder.remove();

    const messagePlaceholder = `
        <div id="${tempId}" class="grid px-4 my-1 w-full ${right ? 'place-items-end' : 'place-items-start'}">
            <div class="max-w-[40vw] py-2 px-4 rounded-full ${right ? 'rounded-br-none' : 'rounded-tl-none'} bg-gray-200">
                ${message.message}
            </div>
        </div>`;

    chatContainer.insertAdjacentHTML('afterbegin', messagePlaceholder);
    chatContainer.scrollTop = 0;

    // Return the ID so the caller can find this specific message later
    return tempId;
}