let overlay = undefined;
let elStatus = undefined;
let elTitle = undefined;
let elAppToken = undefined;
let compMain = undefined;
let compLower = undefined;
const subcompName = "Lower - Header";

/*****************************************************************************/
window.onload = (event) => {
  console.log("The page has fully loaded");
  elStatus = document.querySelector("#id-status");
  elTitle = document.querySelector("#id-text");
  elAppToken = document.querySelector("#id-app-token");
  overlay = SingularGraphics("SingularOverlay");
  overlay.addListener("error", function (event, msg) {
    if (event == "error") {
      elStatus.innerHTML = msg.error.message;
    }
  });

  // load composition on loading
  loadCompositionClick();
};

/*****************************************************************************/
// Locate the output token:
//                                  v--------------------v
// https://app.singular.live/output/1zdbRyB0atQxufS6d29zTH/Output?aspect=16:9
// https://app.singular.live/output/2U5mNKpvLqD4mTKyrIWbmS/Output?aspect=16:9
//
// we use the app token in this example:
// app token: 56BEDC916QbVwyY4be5L8q
function renderAppOutput(token) {
  overlay.renderAppOutput(token, undefined, (isSuccess) => {
    elStatus.innerHTML =
      "INFO: Loading app instance output: " + JSON.stringify(isSuccess);
    console.log(
      "INFO: Loading app instance output: " + JSON.stringify(isSuccess)
    );
    getCompositionReferences();
    clearOutput();
  });
}

/*****************************************************************************/
// Load composition token into Singular preview player
function loadCompositionUrl(compositionUrl) {
  overlay.loadComposition(compositionUrl, (isSuccess) => {
    elStatus.innerHTML =
      "INFO: Loading app instance output: " + JSON.stringify(isSuccess);
    console.log(
      "INFO: Loading app instance output: " + JSON.stringify(isSuccess)
    );
    getCompositionReferences();
    clearOutput();
  });
}

/*****************************************************************************/
// clearOutput
const getCompositionReferences = function () {
  compMain = overlay.getMainComposition();
  // get reference to subcomposition and play In animation
  compLower = compMain.find(subcompName)[0];
  compLower.playTo("In");
};
/*****************************************************************************/
// clearOutput
const clearOutput = function () {
  compMain.listSubcompositions().forEach((comp) => {
    compMain.getSubcompositionById(comp.id).jumpTo("Out");
    // alternatively use playTo(toState) to play to the defined animation state
    // compMain.getSubcompositionById(comp.id).playTo("Out");
  });
};
/*****************************************************************************/
// loadCompositionClick
const loadCompositionClick = function () {
  const appToken = elAppToken.value;
  const apiURL = "https://app.overlays.uno/apiv2/controlapps/" + appToken;
  const requestOptions = {
    method: "GET",
    redirect: "follow"
  };
  fetch(apiURL, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      console.log(result);
      loadCompositionUrl(result.compositionJson);
    })
    .catch((error) => console.log("error", error));
};
/*****************************************************************************/
// set content
const updateMainTitleClick = function () {
  compLower.setPayload({ Header: elTitle.value });
};

/*****************************************************************************/
// run animation
const animationToClick = function (toState) {
  compLower.playTo(toState);
};

/*****************************************************************************/