// task fetchbasic
// &&
// task  fetch improved

const wrapper = document.getElementById("wrapper");

fetch("https://swapi.dev/api/people/1/")
  .then((res) => res.json())
  .then((luke) => creatTable(luke, wrapper));

function creatTable(data, dom) {
  let table = document.createElement("table");
  dom.appendChild(table);
  let html = "";
  for (let key in data) {
    html += `<tr>`;
    html += `<td>${key}</td>`;
    if (Array.isArray(data[key])) {
      html += `<td>`;
      data[key].forEach((element) => {
        html += `<button>${element}</button>`;
      });
      html += `</td>`;
    } else {
      if (isNaN(data[key]) && data[key].includes("https://")) {
        html += `<td><button>${data[key]}</button></td>`;
      } else {
        html += `<td>${data[key]}</td>`;
        html += `</tr>`;
      }
    }
  }
  table.innerHTML = html;
  document.querySelectorAll("button").forEach((btn) => {
    btn.addEventListener("click", openNewTable);
  });
}

function openNewTable(event) {
  const url = event.target.innerText;
  fetch(url)
    .then((res) => res.json())
    .then((json) => creatTable(json, wrapper));
}

//  Task myfetch

const apiUrl = "https://swapi.dev/api/people/1/";
function myfetch(url) {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.send();

    xhr.onload = function () {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.response));
        } else {
          reject(xhr.status);
        }
      };
  });
}


const response = myfetch(apiUrl);
response.then(
  (data) => {
    console.log(data);
  },
  (data) => {
    console.log(data);
  }
);

// Task race

const delay = setTimeout(() => {
  console.log('Done waiting');
}, Math.floor(Math.random() * 7000));

Promise.race([delay, response])