var finishedJobs = [];
var axoUrl = "https://hosted.ntent.art/projects/axo/index.html";

//First we set up an event listener to listen for messages from all iframes
//This allows us to communicate with more effectively, with the name and tokenId
window.addEventListener(
  "message",
  (e) => {
    // Handle the message
    if (typeof e.data === "object" && e.data.event == "axoReady") {
      var iframe = document.getElementById(e.data.value);
      console.log(
        `${e.data.value} is ready. Token Id : ${e.data.tokenId}`
      );
      iframe.tokenId = e.data.tokenId;
    }
  },
  false
);

//you can curate via the query string
var cmds = [
  { action: "F", value: true, frame: 87 },
  { action: "P", value: true, frame: 154 },
  { action: "P", value: false, frame: 469 },
  { action: "F", value: false, frame: 552 },
  { action: "A", value: true, frame: 628 },
  { action: "F", value: true, frame: 770 },
  { action: "P", value: true, frame: 819 },
  { action: "P", value: false, frame: 1079 },
];

var scale = 5;
var olivia = createIframe(
  "olivia",
  "Olivia Dunham",
  axoUrl + "?z=3&w=" +
    JSON.stringify(cmds),
  200,
  200,
  () => {
    //or you can post messages directly
    setTimeout(function () {
      frame.contentWindow.postMessage(
        { call: "axoStateChange", value: "d" },
        "*"
      );
      console.log("Disabling Fate");
    }, 3000);
    setTimeout(function () {
      frame.contentWindow.postMessage(
        { call: "axoStateChange", value: "a" },
        "*"
      );
      console.log("Having Awareness");
    }, 4000);
    setTimeout(function () {
      frame.contentWindow.postMessage(
        { call: "axoStateChange", value: "f" },
        "*"
      );
      console.log("Freaking Out");
    }, 5000);
  }
);

var dick = createIframe(
  "dick",
  "Dick Whitman",
  axoUrl + "?z=" + scale,
  200,
  200
);

var sebastian = createIframe(
  "sebastian",
  "Lil Sebastian",
  axoUrl + "?z=" + scale,
  200,
  200
);

var robotCount = 17;
var robots = [];
for (var i = 0; i < robotCount; i++) {
  var robot = createIframe(
    "robot" + (i + 1).toString(),
    "Robot " + (i + 1),
    axoUrl + "?z=" + scale,
    200,
    200
  );
  robots.push(robot);
}

window.addEventListener(
  "message",
  (e) => {
    // Handle the message
    if (typeof e.data === "object" && e.data.event == "axoStateChange") {
      console.log(`Axo state change incoming: ${e.data.value}`);
      if (!finishedJobs.includes(e.data.id)) {
        finishedJobs.push(e.data.id);
        robots.forEach((r) => {
          if (e.data.tokenId != r.tokenId && e.data.handle == "olivia") {
            r.contentWindow.postMessage(
              {
                event: "axoStateChange",
                action: e.data.action,
                value: e.data.value,
                tokenId: e.data.tokenId,
              },
              "*"
            );
            console.log(
              `Sent message from ${e.data.handle} to ${r.id} : ${e.data.action} : ${e.data.id}`
            );
          }
        });
      }
    }
  },
  false
);

function createIframe(id, label, url, width, height, onload = null) {
  var container = document.createElement("div");
  container.id = id + "-container";
  container.style.width = width;
  container.style.display = "inline-block";
  var iframe = document.createElement("iframe");
  iframe.id = id;
  iframe.onload = () => {
    var frame = document.getElementById(id);
    frame.contentWindow.postMessage({ event: "hello", value: id }, "*");

    if (onload) onload();
  };
  iframe.src = url;
  iframe.style.width = width;
  iframe.style.height = height;
  container.appendChild(iframe);
  var div = document.createElement("div");
  div.style.textAlign = "center";
  div.innerHTML = label;
  container.appendChild(div);
  document.body.appendChild(container);

  return iframe;
}