const data_whoami = document.getElementById("data_whoami");
const time = document.getElementById("time");
const weekday = document.getElementById("weekday");
const timezone = document.getElementById("timezone");
const nofetchy = document.getElementById("no-fetchy");
const about = document.getElementById("about");
const statusus = document.getElementById("status");
const buttonflags = document.getElementById("buttonflags");
const fields = document.getElementById("fields");

const URL_REGEXP =
  /(([a-z0-9.-]*)(((:\/\/)([a-z0-9.-]*))((\/)([\w;,\/?:@&=+$\-_.!~*'()#]*))?)|(((mailto|tel):)([\w;,\/?:@&=+$\-_.!~*'()#]*)))/g;
fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
  .then((x) => x.json())
  .then((user) => {
    data_whoami.innerHTML = `
<p>I'm <a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"><b>${
      user.names[0].value
    }</b></a>, also better known online as <b>${
      user.name
    }</b>. <small>(${user.pronouns
      .filter((pronoun) => pronoun.status == "okay")
      .map((pronoun) => pronoun.pronouns.split("/")[0])
      .join("/")})</small></p>`;
    about.innerHTML = `<h2>Bio</h2><p>MeowcaTheoRange<br />${user.bio
      .replace(URL_REGEXP, (m) => `<a href="${m}" target="_blank">${m}</a>`)
      .replaceAll("\n", "<br />")}</p>`;
    const curTime = new Date();
    timezone.innerHTML = `(UTC${user.utc_offset > 0 ? "+" : "-"}${Math.abs(
      user.utc_offset / (60 * 60)
    )})`;
    buttonflags.onclick = () => {
      user.flags.forEach((flag) => {
        const props = flag.description.split(";");
        initDocument(
          props[0].split(","),
          props[1],
          props[2],
          props[3],
          flag.name
        );
      });
    };
    buttonflags.disabled = false;
    function updateTime() {
      curTime.setTime(Date.now());
      time.innerHTML = curTime.toLocaleTimeString("en-us", {
        timeZone: "America/Chicago",
      });
      weekday.innerHTML = curTime.toLocaleString("en-us", {
        weekday: "long",
        timeZone: "America/Chicago",
      });

      window.requestAnimationFrame(updateTime);
    }
    window.requestAnimationFrame(updateTime);
    nofetchy.style.display = null;
    fields.innerHTML = user.fields
      .map(
        (fieldset) => `
    <section>
      <h2>${fieldset.name}</h2>
      <ul>${fieldset.entries
        .map((entry) => `<li>${entry.value}</li>`)
        .join("")}</ul>
    </section>`
      )
      .join("");
  });

fetch("https://local.abtmtr.link/api/v1/accounts/stat/statuses")
  .then((x) => x.json())
  .then((statuses) => {
    console.log(statuses);
    statusus.innerHTML = `<h2><a href="${statuses[0].url}" target="_blank">Current status</a></h2>${statuses[0].content}<p></p>`;
  });