// let chartData = [];
// const myChart = echarts.init(document.getElementById("chart"));
// const filename = "final__hashrate.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 chartData = await response.json();
//     initEchart(chartData);
//   } catch (error) {
//     console.error("Fetching data failed:", error);
//   }
// }
//
// function initEchart(chartData) {
//   const option = {
//     backgroundColor: backgroundColor,
//     tooltip: {
//       ...tooltip,
//       valueFormatter(value, index) {
//         return nFormatter(value, 0);
//       },
//     },
//     toolbox: toolboxParams,
//     xAxis: {
//       data: chartData.map((row) => row.date),
//       axisTick: axisTick,
//       axisLabel: axisLabel,
//       axisLine: axisLine,
//     },
//     grid: grid,
//     dataZoom: dataZoom(0),
//     yAxis: [
//       {
//         type: "value",
//         name: "Hashrate (H/s)",
//         nameLocation: "middle",
//         nameGap: 30,
//         nameTextStyle: textStyleMain,
//         position: "left",
//         alignTicks: true,
//         axisTick: axisTick,
//         splitLine: {
//           show: false,
//         },
//         axisLine: axisLine,
//         axisLabel: {
//           fontSize: 12 * fontScale,
//           color: textColor,
//           formatter(value, index) {
//             return nFormatter(value, 0);
//           },
//         },
//       },
//       {
//         type: "value",
//         name: "Difficulty",
//         nameLocation: "middle",
//         nameGap: 30,
//         nameTextStyle: textStyleMain,
//         axisTick: axisTick,
//         position: "right",
//         alignTicks: true,
//         axisLine: axisLine,
//         splitLine: {
//           show: false,
//         },
//         axisLabel: {
//           fontSize: 12 * fontScale,
//           color: textColor,
//           formatter(value, index) {
//             return nFormatter(value, 0);
//           },
//         },
//       },
//     ],
//     series: [
//       {
//         type: "line",
//         name: "Hashrate",
//         barCategoryGap: "0%",
//         data: chartData.map((row) => row.hashrate),
//       },
//       {
//         type: "line",
//         color: "red",
//         id: "rolling-average",
//         name: "MA28",
//         showSymbol: false,
//         barCategoryGap: "0%",
//         data: chartData.map((row) => row.hashrate28),
//       },
//       {
//         type: "line",
//         yAxisIndex: 1,
//         name: "Difficulty",
//         barCategoryGap: "0%",
//         data: chartData.map((row) => row.difficulty),
//       },
//     ],
//   };
//
//   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);
//   });
// });


function createChart(
  chart,
  endpoint,
  xAxisType,
  scaleChart = false,
) {
  async function fetchDataForChart(query) {
    try {
      const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
      const response = await fetch(apiEndpoint);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const chartData = await response.json();
      console.log(chartData)
      updateChart(chartData);
    } catch (error) {
      console.error("Fetching data failed:", error);
    }
  }

  function updateChart(chartData) {
    var option = {
      tooltip: {
        ...tooltip,
      },
      xAxis: {
        type: xAxisType,
        data: chartData.map((item) => item.date),
      },
    yAxis: [
      {
        type: "value",
        name: "Hashrate (H/s)",
        nameLocation: "middle",
        nameGap: 30,
        nameTextStyle: textStyleMain,
        position: "left",
        alignTicks: true,
        axisTick: axisTick,
        splitLine: {
          show: false,
        },
        axisLine: axisLine,
        axisLabel: {
          fontSize: 12 * fontScale,
          color: textColor,
          formatter(value, index) {
            return nFormatter(value, 0);
          },
        },
      },
      {
        type: "value",
        name: "Difficulty",
        nameLocation: "middle",
        nameGap: 30,
        nameTextStyle: textStyleMain,
        axisTick: axisTick,
        position: "right",
        alignTicks: true,
        axisLine: axisLine,
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontSize: 12 * fontScale,
          color: textColor,
          formatter(value, index) {
            return nFormatter(value, 0);
          },
        },
      },
    ],
    series: [
      {
        type: "line",
        name: "Hashrate",
        barCategoryGap: "0%",
        data: chartData.map((row) => row.hashrate),
      },
      {
        type: "line",
        color: "red",
        id: "rolling-average",
        name: "MA28",
        showSymbol: false,
        barCategoryGap: "0%",
        data: chartData.map((row) => row.hashrate28),
      },
      {
        type: "line",
        yAxisIndex: 1,
        name: "Difficulty",
        barCategoryGap: "0%",
        data: chartData.map((row) => row.difficulty),
      },
    ],
    };
    chart.setOption(option, true);
  }

  // listen for filter events for this target
  document.addEventListener("filterChange", function(event) {
    eventDetail = event.detail;
    if (eventDetail.filterActions.includes("refresh")) {
      chartData = [];
      query = queryConstructor();
      fetchDataForChart(query);
      updateChart(chartData);
    }
  });

  let query = queryConstructor();
  fetchDataForChart(query);
}

document.addEventListener("DOMContentLoaded", function() {
  chartData = [];
  let chartDom = document.getElementById("hashrate-chart");
  let myChart = echarts.init(chartDom);

  const filterPeriods = { "7 day": 7, "28 day": 28, "365 day": 365, "2 years": 730, "5 years": 1826, "10 years": 3652, "all time": 10000 };
  dropDownFilter("days_ago_dropdown_filter", "days_ago", ["hashrate-chart"], filterPeriods, "365 day")

  createChart(
    chart = myChart,
    endpoint = "bitcoin_hashrate",
    xAxisType = "category",
  );
});