let dataArr = [];
const myChart = echarts.init(document.getElementById("chart"));
const filename = "final__miner_rewards.json";
const periods = [
  "all time",
  "last 7 days",
  "last 28 days",
  "last 365 days",
  "last 2 years",
];

async function fetchDataForChart(selectedValue) {
  try {
    const apiEndpoint = `${apiURL}/get_json/${filename}?period=${selectedValue}`;
    const response = await fetch(apiEndpoint);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const dataArr = await response.json();
    initEchart(dataArr);
  } catch (error) {
    console.error("Fetching data failed:", error);
  }
}

function initEchart(dataArr) {
  console.log(dataArr);
  const option = {
    backgroundColor: backgroundColor,
    tooltip: {
      ...tooltip,
      formatter: function (params) {
        let colors = ["#ee6666", "#000000", "#b0da9d", "#8699d5"];
        let colorSpan = (color) =>
          '<span style="display:inline-block;margin-right:1px;border-radius:5px;width:9px;height:9px;background-color:' +
          color +
          '"></span>';
        let tooltip = "<p>" + params[0].axisValue + "</p>";
        params.reverse().forEach((item, index) => {
          let color = colors[index % colors.length];
          let labels =
            "<p>" +
            colorSpan(color) +
            " " +
            item.seriesName +
            ": " +
            nFormatter(item.data, 3);
          ("</p>");
          tooltip += labels;
        });

        return tooltip;
      },
      valueFormatter(value, index) {
        return nFormatter(value, 3);
      },
    },
    toolbox: toolboxParams,
    xAxis: {
      data: dataArr.map((row) => row.date),
      axisTick: axisTick,
      axisLabel: axisLabel,
      axisLine: axisLine,
    },
    grid: grid,
    dataZoom: dataZoom(0),
    yAxis: [
      {
        type: "value",
        name: "Rewards (USD)",
        nameLocation: "middle",
        nameGap: 30,
        nameTextStyle: textStyleMain,
        position: "left",
        alignTicks: true,
        axisTick: axisTick,
        axisLine: axisLine,
        splitLine: {
          show: false,
        },
        axisLabel: {
          ...axisLabel,
          formatter(value, index) {
            return nFormatter(value, 0);
          },
        },
      },
      {
        type: "value",
        name: "Subsidy (BTC)",
        nameLocation: "middle",
        nameGap: 20,
        nameTextStyle: {
          fontSize: 12 * fontScale,
          color: textColor,
        },
        axisTick: axisTick,
        position: "right",
        alignTicks: true,
        axisLine: axisLine,
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontSize: 12 * fontScale,
          color: textColor,
        },
      },
    ],
    series: [
      {
        type: "line",
        name: "Subsidy (USD)",
        stack: "Total",
        areaStyle: {},
        symbol: "none",
        lineStyle: {
          width: 0,
        },
        data: dataArr.map((row) => row.subsidy_usd),
      },
      {
        type: "line",
        name: "Fees (USD)",
        stack: "Total",
        areaStyle: {},
        symbol: "none",
        lineStyle: {
          width: 0,
        },
        data: dataArr.map((row) => row.totalfee_usd),
      },
      {
        type: "line",
        name: "Total (USD)",
        symbol: "none",
        lineStyle: {
          width: 1,
          color: textColor,
        },
        data: dataArr.map((row) => row.total_reward_usd),
      },
      {
        type: "line",
        yAxisIndex: 1,
        name: "Block Subsidy (BTC)",
        symbol: "none",
        lineStyle: {
          width: 3,
        },
        data: dataArr.map((row) => row.block_subsidy),
      },
    ],
  };

  myChart.setOption(option);
}

document.addEventListener("DOMContentLoaded", function () {
  let periodIndex = 2;
  periodDropdown(periods, periodIndex);
  fetchDataForChart(periods[periodIndex]);
  const selectElement = document.getElementById("select-period-dropdown");

  selectElement.addEventListener("change", function (event) {
    const selectedValue = event.target.value;
    fetchDataForChart(selectedValue);
  });
});