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

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

    addMessageToChat({message: message}, true);

    const response = await axios.post(`/api/chat/${recipentId}/message`, {message: message});
}

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

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

    const messagePlaceholder = `
        <div 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-2xl  bg-gray-200">
                ${message.message}
            </div>
        </div>`;

    chatContainer.insertAdjacentHTML('afterbegin', messagePlaceholder);

    chatContainer.scrollTop = 0;
}