let chartData = [];
let myChart;

async function fetchDataForChart(str) {
  try {
    const apiEndpoint = `https://api.bitlab21.com/bitcoin_business_growth_by_country?cumulative_period_type=365 day&countries=${str}`;
    const response = await fetch(apiEndpoint);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const fetchedData = await response.json();
    const newData = fetchedData.reduce((acc, item) => {
      const objectId = item.country_name;
      if (!acc[objectId]) {
        acc[objectId] = [];
      }
      acc[objectId].push([item.date, item.cumulative_current_value]);
      return acc;
    }, {});
    chartData = { ...chartData, ...newData };
    updateChart();
  } catch (error) {
    console.error("Fetching data failed:", error);
  }
}

function updateChart() {
  let chartDataMap = new Map();
  for (let objectId in chartData) {
    chartDataMap.set(objectId, chartData[objectId]);
  }
  option = {
    backgroundColor: backgroundColor,
    grid: grid,
    tooltip: tooltip,
    toolbox: toolboxParams,
    xAxis: {
      axisTick: axisTick,
      axisLabel: axisLabel,
      axisLine: axisLine,
      type: "time",
    },
    yAxis: {
      axisTick: axisTick,
      splitLine: {
        show: false,
      },
      axisLabel: {
        fontSize: 12 * fontScale,
        color: textColor,
        formatter(value, index) {
          return nFormatter(value, 2);
        },
      },
      axisLine: axisLine,
    },

    series: Array.from(chartDataMap.entries()).map(([name, data]) => ({
      name,
      type: "line",
      data,
      showSymbol: false,
    })),
  };
  myChart.setOption(option, true);
}

function handleCheckboxChange(event) {
  if (event.target.type === "checkbox") {
    const boxChecked = event.target.checked;
    const boxId = event.target.id;
    // Remove unchecked boxes
    if (boxChecked === false) {
      delete chartData[boxId];
      updateChart();
      // Add checked boxes
    } else {
      fetchDataForChart(boxId);
    }
  }
}

document.addEventListener("reloadTable", () => {
  myChart = echarts.init(document.getElementById("chart"));
  jsonTableCheckedBoxes = document.querySelectorAll(
    '#jsonTableContainer input[type="checkbox"]:checked',
  );
  const checkedBoxes = Array.from(jsonTableCheckedBoxes).map(
    (checkbox) => checkbox.id,
  );
  const str = checkedBoxes.join(",");
  chartData = [];
  fetchDataForChart(str);

  jsonTable = document.getElementById("jsonTableContainer");
  jsonTable.removeEventListener("change", handleCheckboxChange);
  jsonTable.addEventListener("change", handleCheckboxChange);
});