import { initViewer, loadModel } from "./viewer.js";

// Declare the index number of the model in the array
const urnModelID = window.modelURN;
console.log(urnModelID)


// Function to change the title text
function changeTitle(newTitle) {
  const titleElement = document.querySelector(".title");
  if (titleElement) {
    titleElement.textContent = newTitle;
  } else {
    console.error("Title element not found");
  }
}

async function getModelsUrn() {
  try {
    const resp1 = await fetch("/api/models"); // api call to get all available models
    const allmodels = await resp1.json();
    const resp2 = await fetch("/api/selectedmodel") // api call to get configured model name
    const selectModelName = await resp2.json();
    for (let i = 0; i < allmodels.length; i++){
      if (allmodels[i].name == selectModelName.name){
        console.log(allmodels[i].urn);
        changeTitle(allmodels[i].name)
        return allmodels[i].urn;
      }
    }
  } catch (err) {
    alert("Could not list models. See the console for more details.");
    console.error(err);
  }
}

initViewer(document.getElementById("preview")).then((viewer) => {
  loadModelwithViewer(viewer);
});


async function loadModelwithViewer(viewer) {
  if (window.onModelSelectedTimeout) {
    clearTimeout(window.onModelSelectedTimeout);
    delete window.onModelSelectedTimeout;
  }
  const urn = await getModelsUrn();
  window.location.hash = urn;

  try {
    const resp = await fetch(`/api/models/${urn}/status`);
    if (!resp.ok) {
      throw new Error(await resp.text());
    }
    const status = await resp.json();
    switch (status.status) {
      case "n/a":
        showNotification(`Model has not been translated.`);
        break;
      case "inprogress":
        showNotification(`Model is being translated (${status.progress})...`);
        window.onModelSelectedTimeout = setTimeout(
          onModelSelected,
          5000,
          viewer,
          urn
        );
        break;
      case "failed":
        showNotification(
          `Translation failed. <ul>${status.messages
            .map((msg) => `<li>${JSON.stringify(msg)}</li>`)
            .join("")}</ul>`
        );
        break;
      default:
        clearNotification();
        loadModel(viewer, urn);
        break;
    }
  } catch (err) {
    alert("Could not load model. See the console for more details.");
    console.error(err);
  }
}

function showNotification(message) {
  const overlay = document.getElementById("overlay");
  overlay.innerHTML = `<div class="notification">${message}</div>`;
  overlay.style.display = "flex";
}

function clearNotification() {
  const overlay = document.getElementById("overlay");
  overlay.innerHTML = "";
  overlay.style.display = "none";
}