// fetch basic && fetch improved

async function getData(link) {
  try {
    const data = await fetch(link);
    const person = await data.json();
    return person;
  } catch (e) {
    console.log(e);
  }
}

async function showTable(block, link) {
  let readyTable = await buildTable(block, await getData(link));
  let blockEl = document.querySelector(".container");
  blockEl.appendChild(readyTable);
}

async function buildTable(el, json) {
  let newTable = document.createElement("table");
  newTable.className = ".tableFetch";
  newTable.setAttribute("border", "1");
  let tds = 0;
  let btns = 0;
  for (let [key, value] of Object.entries(json)) {
    tds++;
    let th = document.createElement("th");
    let td = document.createElement("td");
    td.id = `${key}TD${tds}`;
    let tr = document.createElement("tr");
    th.innerText = key;
    if (typeof value === "string" && value.includes("http")) {
      btns++;
      let btn = document.createElement("button");
      btn.id = `${key}Btn${btns}`;
      btn.innerText = value;
      td.innerHTML = btn.outerHTML;
    } else if (Array.isArray(value) && value.length !== 0) {
      for (let el of value) {
        btns++;
        let btn = document.createElement("button");
        btn.id = `${key}Btn${btns}`;
        btn.innerText = el;
        td.innerHTML += `${btn.outerHTML}\n`;
      }
    } else {
      td.innerText = value.length > 0 ? value : "No value";
    }
    tr.appendChild(th);
    tr.appendChild(td);
    newTable.append(tr);
  }

  let buttons = newTable.querySelectorAll("button");
  if (buttons.length !== 0) {
    for (let btn of buttons) {
      btn.onclick = async () => {
        let appendTable = document.createElement("table");
        appendTable.setAttribute("border", "1");
        let btnTR = btn.closest("tr");
        let btnTH = btnTR.firstChild;
        btnTR.className = `${btnTH.textContent}TR`;
        let data = btn.textContent;
        btn.remove();
        let TR = document.querySelector(`.${btnTR.className}`);
        appendTable.appendChild(TR);
        await showTable(appendTable, data);
      };
    }
  }
  el.appendChild(newTable);
  return el;
}

showTable(blockTable, "https://swapi.dev/api/people/1/");

// myfetch

function myfetch(url) {
  return new Promise(function (resolve, reject) {
    const request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.onreadystatechange = function () {
      if (request.readyState != 4) {
        return;
      }
      if (request.status == 200) {
        resolve(JSON.parse(request.responseText));
      } else {
        reject(request.status + ", " + request.statusText);
      }
    };
    request.send();
  });
}

myfetch("https://swapi.dev/api/people/1/").then((data) =>
  console.log(`MyFetch response:`, data)
);

// race

const delay = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));

Promise.race([delay(1000), myfetch("https://swapi.dev/api/people/1/")]).then(
  (value) => {
    console.log(`First loaded promise: `, value);
  }
);