const textInput = document.getElementById("textInput");
const speakButton = document.getElementById("speakButton");
const againButton = document.getElementById("againButton");
const stopButton = document.getElementById("stopButton");
const exampleDropdown = document.getElementById("exampleDropdown");
const unityIframe = document.getElementById("unity-iframe");

let lastSpokenText = ""; // Store the last spoken message

// Trigger VTutor to speak
speakButton.addEventListener("click", () => {
  const message = textInput.value;
  lastSpokenText = message;
  if (unityIframe && unityIframe.contentWindow) {
    unityIframe.contentWindow.postMessage(
      { action: "unitySpeak", message: message },
      "*"
    );
    stopButton.style.display = "block";
    speakButton.style.display = "none";
  }
});

// Reload the last spoken text into the input area
againButton.addEventListener("click", () => {
  if (lastSpokenText) {
    textInput.value = lastSpokenText;
  }
});

// Stop the speaking avatar
stopButton.addEventListener("click", () => {
  if (unityIframe && unityIframe.contentWindow) {
    unityIframe.contentWindow.postMessage({ action: "stopSpeaking" }, "*");
  }
});

// Handle messages from the Unity iframe
const handleIframeMessage = (event) => {
  if (event.data.type === "IFRAME_CLICK") {
    const { x, y } = event.data;
    unityIframe.style.pointerEvents = "none";
    const underlyingElements = document.elementsFromPoint(x, y);
    for (let element of underlyingElements) {
      if (element instanceof HTMLElement) {
        element.click();
        element.focus();
      }
    }
  } else if (event.data.type === "VTuber_Message_Delivery_Complete") {
    stopButton.style.display = "none";
    speakButton.style.display = "block";
  }
};

window.addEventListener("message", handleIframeMessage);

// Populate dropdown with multilingual examples
const examples = {
  "What is VTutor (English)": `VTutor is an open-source Software Development Kit.\nIt is designed to integrate Animated Pedagogical Agents with generative AI capabilities into web applications.`
  // ... (other languages omitted for brevity)
};

Object.keys(examples).forEach((key) => {
  const option = document.createElement("option");
  option.value = examples[key].replaceAll("  ", "");
  option.textContent = key;
  exampleDropdown.appendChild(option);
});

// Set initial example on load
exampleDropdown.selectedIndex = 1;
textInput.value = Object.values(examples)[0];