// Get the user input element from the DOM
const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');
const parser = window.markdownit({
  linkify: true,
  strikethrough: true,
});
parser.enable(['table']);

let apiEndpoint; // Make variable available outside of the scope of the event listener
let useModel; // Make variable available outside of the scope of the event listener

const frontendApi = {
  // Define a function to send the user's message to the AI
  sendMessage: function() {
    if (!window.apiEndpoint || !window.useModel) { // Check if we're ready before proceeding
      console.error("Not ready yet. Please wait for apiEndpoint and useModel to be set.");
      return;
    }
    
    // Get the user's input message and trim any whitespace
    const query = userInput.value.trim();
    // Check if the message is not empty
    if (query !== '') {
      fetch(window.apiEndpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, model: window.useModel }), // Add these parameters here
      })
      .then(response => response.json())
      .then(data => {
        // Get the AI's response from the API data
        const aiResponse = data.response;
        // Render the user's original message in the chatbox
        this.renderMessage(query, 'user-message');
        // Render the AI's response in the chatbox
        this.renderMessage(aiResponse, 'ai-response');
        // Clear the user input field for the next message
        userInput.value = '';
      })
      .catch(error => console.error('Error sending message:', error));
    }
  },
  // Define a function to render a message in the chatbox with a specific class name
  renderMessage: function(text, className) {
    // Create a new div element to hold the message
    const messageElement = document.createElement('div');
    // Add the specified class name to the element
    messageElement.className = className;
    // Use the markdown-it parser
    const html = parser.render(text);
    messageElement.innerHTML = html;
    // Append the message element to the chatbox immediately
    chatbox.appendChild(messageElement);
  },
  // Set the endpoint and LLM variables
  setEndpointAndLlm: function(endpoint, llm) {
    window.endpoint = endpoint;
    window.llm = llm;
    console.log(`Selected Endpoint: ${endpoint}, LLM: ${llm}`);
  },
};

// Wait for the event listener to set apiEndpoint and useModel
window.addEventListener('message', function(event) {
  if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
    const { apiEndpoint, useModel } = event.data;
    console.log("fronend.js - API Endpoint: ", apiEndpoint);
    console.log("fronend.js - use model: ", useModel);
    window.apiEndpoint = apiEndpoint;
    window.useModel = useModel;
  }
});

// Wait for the DOM to be fully loaded before making the API available
document.addEventListener('DOMContentLoaded', function() {
  window.frontendApi = frontendApi;
});


// Make the button toggle colour when user presses Enter on keyboard
const sendButton = document.getElementById('sendButton');
document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed
  }
});
document.addEventListener('keyup', function() {
  sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
});