async function getJSON(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw response.status;
  } else {
    return await response.json();
  }
}

const baseUrl = "https://oss.x-lab.info/open_digger/github";
const repoName = "X-lab2017/open-digger";

const container = document.getElementById("main");
const chart = echarts.init(container);
const updateFrequency = 2000;
const colorMap = new Map();
const option = {
  grid: {
    top: 10,
    bottom: 30,
    left: 150,
    right: 80
  },
  xAxis: {
    max: "dataMax",
    axisLabel: {
      formatter: function (n) {
        return Math.round(n) + "";
      }
    }
  },
  yAxis: {
    type: "category",
    inverse: true,
    max: 10,
    axisLabel: {
      show: true,
      fontSize: 14,
      formatter: function (value) {
        if (!value || value.endsWith("[bot]")) return value;
        return `${value} {avatar${value.replaceAll("-", "")}|}`;
      },
      rich: null
    },
    animationDuration: 300,
    animationDurationUpdate: 300
  },
  series: [
    {
      realtimeSort: true,
      seriesLayoutBy: "column",
      type: "bar",
      itemStyle: {
        color: function (params) {
          const githubId = params.value[0];
          if (colorMap.has(githubId)) {
            return colorMap.get(githubId);
          } else {
            const randomColor =
              "#" + Math.floor(Math.random() * 16777215).toString(16);
            colorMap.set(githubId, randomColor);
            return randomColor;
          }
        }
      },
      data: null,
      encode: {
        x: 1,
        y: 0
      },
      label: {
        show: true,
        precision: 1,
        position: "right",
        valueAnimation: true,
        fontFamily: "monospace"
      }
    }
  ],
  // Disable init animation.
  animationDuration: 0,
  animationDurationUpdate: updateFrequency,
  animationEasing: "linear",
  animationEasingUpdate: "linear",
  graphic: {
    elements: [
      {
        type: "text",
        right: 60,
        bottom: 60,
        style: {
          text: null,
          font: "bolder 60px monospace",
          fill: "rgba(100, 100, 100, 0.25)"
        },
        z: 100
      }
    ]
  }
};

let playing = false;
async function play() {
  $('#title').text(repoName);
  playing = true;
  const data = await getJSON(`${baseUrl}/${repoName}/activity_details.json`);
  const months = Object.keys(data);
  let startIndex = 0;
  let startMonth = months[startIndex];

  for (let i = startIndex; i < months.length - 1; ++i) {
    (function (i) {
      setTimeout(function () {
        updateMonth(months[i + 1]);
        if (i + 1 === months.length - 1) {
          playing = false;
        }
      }, (i - startIndex) * updateFrequency);
    })(i);
  }
  function updateMonth(month) {
    const rich = {};
    data[month].forEach((item) => {
      // rich name cannot contain special characters such as '-'
      rich[`avatar${item[0].replaceAll("-", "")}`] = {
        backgroundColor: {
          image: `https://avatars.githubusercontent.com/${item[0]}?s=48&v=4`
        },
        height: 20
      };
    });
    option.yAxis.axisLabel.rich = rich;
    option.series[0].data = data[month];
    option.graphic.elements[0].style.text = month;
    chart.setOption(option);
  }
}

play();
$("#replay-btn").click(() => {
  if (playing) {
    alert("Already playing!");
    return;
  }
  play();
});