import "./styles.css";

let givenProfile = "";
let profileName = "";
let profileID = "";
let profileLink = "";
let profileRepos = "";

// Funktsionloob ja uuenda veebilehe sissu
function renderPage() {
  document.getElementById("app").innerHTML = `
      <div>
        <h1>Github konto vaade</h1>
        <p>Palun sisesta konto nimi</p>
        <input placeholder="Sisesta GitHub kasutajanimi" value="${givenProfile}" />
        <div class="content">
          <h1 id="nimi">Nimi: ${profileName ? profileName : "-"}</h1>
          <p id="profileid">ID: ${profileID ? profileID : "-"}</p>
          <p id="profilerepos">Repos: ${profileRepos ? profileRepos : "-"}</p>
          <p id="profileurl">Link: ${
            profileLink && profileName
              ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
              : "-"
          }</p>
        </div>
      </div>
    `;
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

// Jalgib sisestus valju muudutusi
function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

// Teostab API päringud ja töödeldab vastused
async function fetchProfile() {
  if (!givenProfile) {
    profileName = "";
    profileID = "";
    profileLink = "";
    profileRepos = "";
    renderPage();
    return;
  }
  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );
    const rateLimitRemaining = response.headers.get("X-RateLimit-Remaining");
    if (!response.ok) {
      profileName = "User not found";
      profileID = "-";
      profileLink = "";
      profileRepos = "-";
    } else {
      const data = await response.json();
      profileName = data.login || "-";
      profileID = data.id || "-";
      profileLink = data.html_url || "-";
      profileRepos = data.public_repos || "-";
    }
    if (rateLimitRemaining === "0") {
      profileName = "API rate limit reached. Try again later.";
      profileID = "";
      profileLink = "";
      profileRepos = "";
    }
    renderPage();
  } catch (e) {
    console.log(e);
    profileName = "Error";
    profileID = "-";
    profileLink = "";
    profileRepos = "-";
    renderPage();
  }
}
renderPage();

import "./styles.css";

let givenProfile = "";
let profileName = "";
let profileID = "";
let profileLink = "";
let profileRepos = "";

// Funktsionloob ja uuenda veebilehe sissu
function renderPage() {
  document.getElementById("app").innerHTML = `
      <div>
        <h1>Github konto vaade</h1>
        <p>Palun sisesta konto nimi</p>
        <input placeholder="Sisesta GitHub kasutajanimi" value="${givenProfile}" />
        <div class="content">
          <h1 id="nimi">Nimi: ${profileName ? profileName : "-"}</h1>
          <p id="profileid">ID: ${profileID ? profileID : "-"}</p>
          <p id="profilerepos">Repos: ${profileRepos ? profileRepos : "-"}</p>
          <p id="profileurl">Link: ${
            profileLink && profileName
              ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
              : "-"
          }</p>
        </div>
      </div>
    `;
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

// Jalgib sisestus valju muudutusi
function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

// Teostab API päringud ja töödeldab vastused
async function fetchProfile() {
  if (!givenProfile) {
    profileName = "";
    profileID = "";
    profileLink = "";
    profileRepos = "";
    renderPage();
    return;
  }
  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );
    const rateLimitRemaining = response.headers.get("X-RateLimit-Remaining");
    if (!response.ok) {
      profileName = "User not found";
      profileID = "-";
      profileLink = "";
      profileRepos = "-";
    } else {
      const data = await response.json();
      profileName = data.login || "-";
      profileID = data.id || "-";
      profileLink = data.html_url || "-";
      profileRepos = data.public_repos || "-";
    }
    if (rateLimitRemaining === "0") {
      profileName = "API rate limit reached. Try again later.";
      profileID = "";
      profileLink = "";
      profileRepos = "";
    }
    renderPage();
  } catch (e) {
    console.log(e);
    profileName = "Error";
    profileID = "-";
    profileLink = "";
    profileRepos = "-";
    renderPage();
  }
}
renderPage();