const result = document.querySelector("#result");

function render(value) {
  result.textContent = JSON.stringify(value, null, 2);
}

function readCookie(name) {
  const prefix = `${encodeURIComponent(name)}=`;
  const value = document.cookie
    .split("; ")
    .find((cookie) => cookie.startsWith(prefix));
  return value ? decodeURIComponent(value.slice(prefix.length)) : null;
}

async function request(path, options = {}) {
  const response = await fetch(path, {
    ...options,
    headers: { Accept: "application/json", ...options.headers },
  });
  if (response.redirected || response.status === 401) {
    window.location.assign("/oauth2/authorization/keycloak");
    return null;
  }
  const body = await response.json();
  render({ status: response.status, ...body });
  return { response, body };
}

document.querySelector("#login").addEventListener("click", () => {
  window.location.assign("/oauth2/authorization/keycloak");
});

document.querySelector("#inspect").addEventListener("click", () => {
  void request("/bff/token-boundary");
});

document.querySelector("#call-bff").addEventListener("click", () => {
  void request("/bff/api/me");
});

document.querySelector("#change-with-csrf").addEventListener("click", async () => {
  const csrfResponse = await fetch("/bff/csrf", {
    headers: { Accept: "application/json" },
  });
  const csrf = await csrfResponse.json();
  const csrfToken = readCookie("XSRF-TOKEN");
  if (!csrfToken) {
    render({ status: 500, error: "XSRF-TOKEN cookie was not created" });
    return;
  }
  await request("/bff/api/preferences", {
    method: "POST",
    body: new URLSearchParams({ theme: "dark" }),
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      [csrf.headerName]: csrfToken,
    },
  });
});