const DELAYTIME = 500
let DATA;

function postMessage(url="https://jacobinathanialpeterson-chatbox.hf.space/postMessage") {
	const controller = new AbortController();
	const abortSignal = controller.signal;
	fetch(url, { 
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({nameInput: document.getElementById("nameInputBox").value, messageInput: document.getElementById("messageInputBox").value}),
			signal: abortSignal
		})
		.then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } return response.json() })
		.then(data => {
			controller.abort(); 
		})
		.catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted:', error.message) } else { console.error('Error fetching data:', error.message) }});
}

function getMessages(url="https://jacobinathanialpeterson-chatbox.hf.space/messages") {
	const controller = new AbortController();
	const abortSignal = controller.signal;
	fetch(url, {signal: abortSignal})
		.then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } return response.json() })
		.then(data => {
			// Get the keys of the object
			const keys = Object.keys(data);

			// Sort the keys based on their natural order
			keys.sort((a, b) => {
			  // Extract numeric part of keys
			  const numA = parseInt(a.match(/\d+/)[0]);
			  const numB = parseInt(b.match(/\d+/)[0]);
			  return numA - numB;
			});

			// Create a new object with sorted keys
			DATA = {};
			keys.forEach(key => {
			  DATA[key] = data[key];
			});

			controller.abort(); 
		})
		.catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted:', error.message) } else { console.error('Error fetching data:', error.message) }});
}

let atBottom = true;

function updateUI() {
  const messagesContainer = document.getElementById("messages");
  const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop === messagesContainer.clientHeight;

  let elementValue = '';
  if (DATA) {
    Object.entries(DATA).forEach(([key, value]) => {
      elementValue +=
        `<div class="msg" id="${key}">
          <div class="nme">${value.name}: </div>
          <div class="body">${value.message}</div>
        </div>`;
    });
  }
  messagesContainer.innerHTML = elementValue;

  if (atBottom || isAtBottom) {
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
  atBottom = isAtBottom;
}

setInterval(getMessages, 100);
setTimeout(() => {
  setInterval(updateUI, 100);
}, DELAYTIME);

document.getElementById("messages").addEventListener("scroll", () => {
  const messagesContainer = document.getElementById("messages");
  const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop === messagesContainer.clientHeight;
  atBottom = isAtBottom;
});

function handleKeyPress(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    postMessage();
  }
}

document.getElementById("messageInputBox").addEventListener("keypress", handleKeyPress);