const data_get = document.getElementById("data_get");

function check_uptime(event, url) {
  const outElement = event.target;
  const startTime = performance.now();
  let status, time, timer;
  outElement.disabled = true;
  fetch_ask(url, { mode: "no-cors", cache: "no-cache" })
    .then((res) => {
      const endTime = performance.now();
      time = ((endTime - startTime) / 1000).toFixed(2);
      outElement.innerHTML = `Check Status (${time}s)`;
    })
    .catch((err) => {
      const endTime = performance.now();
      time = ((endTime - startTime) / 1000).toFixed(2);
      outElement.innerHTML = `Check Status (${time}s - Error)`;
    })
    .finally(() => {
      window.cancelAnimationFrame(timer);
      outElement.disabled = false;
    });
  function timeCounter() {
    const curTime = performance.now();
    time = (curTime - startTime) / 1000;
    if (time >= 5)
      outElement.innerHTML = `Check Status (${time.toFixed(
        2
      )}s - Taking longer than usual)`;
    else outElement.innerHTML = `Check Status (${time.toFixed(2)}s - Waiting)`;
    timer = window.requestAnimationFrame(timeCounter);
  }
  timer = window.requestAnimationFrame(timeCounter);
}

fetch_ask("https://blog.abtmtr.link/api/collections/paste/posts/domain")
  .then((x) => x.json())
  .then((paste) => {
    const data = JSON.parse(paste.data.body);
    data_get.innerHTML = data.reduce((html, subdomain) => {
      const id = `${subdomain.name.replaceAll(".", "")}-uptime`;
      return (
        html +
        `<h2><a href="${subdomain.url}" target="_blank">${
          subdomain.name
        }</a></h2>
        ${subdomain.description.map((x) => `<p>${x}</p>`).join("")}
        <img src="${subdomain.src}" alt="${subdomain.name}" title="${
          subdomain.name
        }" />
        <p>
        <button
          onclick="check_uptime(event, '${subdomain.url}')"
        >Check Status</button>
        <span id="${id}"></span></p>`
      );
    }, "");
  });