let img;
let playerID;

function loadFicha(id) {
  $.ajax({
    url: `${window.api}player/info/${id}`,
    type: "GET",
    xhrFields: { withCredentials: true },
    success(resp) {
      if (!img) {
        img = resp.Foto;
        $("#hero").attr("src", `data:image/*;base64,${resp.Foto}`);
      }

      if (!playerID) playerID = resp.PlayerID;
      $("#vdp").text(resp.Vida);
      $("#nmp").text(resp.PlayerName);
      $("#lvp").text(resp.Level);
      $("#idp").text(resp.Idade);
      $("#alp").text(resp.Altura);
      $("#progress nav").css({ width: resp.VidaPorcentagem + "%" });

      const statusMap = [
        { limit: 0, text: "Status: morto(a)" },
        { limit: 5, text: "Status: morrendo" },
        { limit: 50, text: "Status: muito ferido(a)" },
        { limit: 70, text: "Status: ferido(a)" },
        { limit: 100, text: "Status: normal" },
      ];

      const status = statusMap.find((s) => resp.VidaPorcentagem <= s.limit);
      $("#playerDATA ul h3").text(status?.text || "Status: desconhecido");
    },
    error() {
      return $("body").html(
        '<div class="erro">a url esta incorreta ou usuario não existe</div>',
      );
    },
  });
}

$(document).ready(function () {
  function getParam(param) {
    let urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
  }

  let id = getParam("id");

  if (!id) {
    return $("body").html(
      '<div class="erro">Você precisa passar uma ID na url</div>',
    );
  }
  setInterval(() => {
    loadFicha(id);
  }, 1000);

  loadFicha(id);
});