async function fetchDataForTable() {
  try {
    const dropdown = document.querySelector(".dropdownFilter");
    let selectedIndex = dropdown.selectedIndex;
    let selectedValue = dropdown.options[selectedIndex].value;
    const apiEndpoint =
      "https://api.bitlab21.com/bitcoin_business_growth_by_country?latest_date=true";
    const response = await fetch(
      apiEndpoint + `&cumulative_period_type=${selectedValue}`,
    );
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const fetchedData = await response.json();
    data = fetchedData;
    createTable(data);
  } catch (error) {
    console.error("Fetching data failed:", error);
  }
}

function createTable(data) {
  const jsonTableContainer = document.getElementById("jsonTableContainer");
  jsonTableContainer.innerHTML = "";
  const table = document.createElement("table");
  let checkedBoxes = [];
  const thead = document.createElement("thead");
  const headerRow = document.createElement("tr");
  tableHeaders = [
    "Select",
    "Country",
    "Previous #",
    "Current #",
    "Diff",
    "% Diff",
  ];
  tableHeaders.forEach((header) => {
    const th = document.createElement("th");
    th.textContent = header;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);
  const tbody = document.createElement("tbody");
  filteredData = data.filter((item) => 1 === 1);
  filteredData.sort((a, b) => {
    const sortField = "diff";
    return Math.abs(b[sortField]) - Math.abs(a[sortField]);
  });
  filteredData.forEach((row, index) => {
    const tr = document.createElement("tr");
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = index < 1;
    checkbox.addEventListener("change", function () {
      if (this.checked) {
        checkedBoxes.push(row["country_name"]);
      } else {
        checkedBoxes = checkedBoxes.filter((id) => id !== row["country_name"]);
      }
    });
    checkbox.id = row["country_name"];
    tr.appendChild(document.createElement("td")).append(checkbox);
    columnNames = [
      "country_name",
      "cumulative_previous_value",
      "cumulative_current_value",
      "diff",
      "pct_diff",
    ];
    columnNames.forEach((columnName) => {
      const td = document.createElement("td");
      const div = document.createElement("div");
      div.id = "scrollable";
      div.textContent = row[columnName];
      td.appendChild(div);
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
    if (checkbox.checked) {
      checkedBoxes.push(row["country_name"]);
    }
  });
  table.appendChild(tbody);
  const tableContainer = document.getElementById("jsonTableContainer");
  tableContainer.appendChild(table);
  tableContainer.dispatchEvent(
    new CustomEvent("reloadTable", { bubbles: true }),
  );
}

window.onload = () => {
  const dropdown = document.querySelector(".dropdownFilter");
  fetchDataForTable();
  dropdown.addEventListener("change", () => {
    fetchDataForTable();
  });
};