function chipClass(status) {
  if (status === "ok") return "good";
  if (status === "failed" || status === "lost" || status === "killed") return "bad";
  if (status === "running" || status === "busy" || status === "starting") return "warn";
  return "muted";
}

export default {
  title: "Builds",
  interval: 5,

  mount(el) {
    const box = document.createElement("div");
    box.className = "sbb";
    el.append(box);
  },

  update(state, el) {
    const box = el.querySelector(".sbb");
    box.textContent = "";
    if (state.offline) {
      box.textContent = "build VM unreachable";
      return;
    }
    const jobs = state.jobs ?? [];
    if (!jobs.length) {
      box.textContent = "No jobs";
      return;
    }
    for (const job of jobs.slice(0, 8)) {
      const row = document.createElement("div");
      row.className = "row";
      const id = document.createElement("span");
      id.className = "num id";
      id.textContent = job.id;
      const status = document.createElement("span");
      status.className = chipClass(job.status);
      status.textContent = job.status;
      row.append(id, status);
      box.append(row);
    }
  },
};