export default function initGraph(options) {
  const { el, r, width, height, margin, fontSize } = getConfig(options);
  const svg = d3.select(el).append('svg').attr('width', width).attr('height', height);

  const healthyStatus = options.healthy ? 'healthy': 'unhealthy';

  const rectangle = svg.append("rect").attr("x", r).attr("y", margin).attr("width", width).attr("height", height - margin*2)
    .attr("class", `${healthyStatus} background`);

  const circle = svg.append("circle").attr("cx", r).attr("cy", r).attr("r", r)
    .attr("class", `${healthyStatus} circle`);

  const text = svg.append("svg:text")
    .attr("x", 3*r)
    .attr("y", height/2)
    .attr("dy", fontSize / 2)
    .attr("text-anchor", "start")
    .text(options.component)
    .style("font-size", fontSize + "px")
    .attr("class", `${healthyStatus} text`);

  const icon = svg.append('image')
    .attr("x", 0.5*r)
    .attr("y", 0.5*r)
    .attr('width', r).attr('height', r)
    .attr("xlink:href", options.healthy ? "/assets/images/checkmark.svg" : "/assets/images/flag.svg");

  return {
    updateHealthStatus(healthy) {
      rectangle.attr("class", `${healthyStatus} background`);
      circle.attr("class", `${healthyStatus} circle`);
      text.attr("class", `${healthyStatus} text`);
      icon.attr("xlink:href", healthy ? "/assets/images/checkmark.svg" : "/assets/images/flag.svg");
    },

    fit() {
      fit(svg, el, rectangle, circle, text, icon);
    },
  };
}

function fit(svg, el, rectangle, circle, text, icon) {
  const { r, width, height, margin, fontSize } = getConfig({el});
  svg.attr('width', width).attr('height', height);
  rectangle.attr("x", r).attr("y", margin).attr("width", width).attr("height", height - margin*2);
  circle.attr("cx", r).attr("cy", r).attr("r", r);
  text.attr("x", 3*r).attr("y", height/2).attr("dy", fontSize / 2).style("font-size", fontSize + "px");
  icon.attr("x", 0.5*r).attr("y", 0.5*r).attr('width', r).attr('height', r);
}

function getWidth(el) {
  const width = el.parentNode.offsetWidth;
  return width > 0 ? width : 0;
}

function getConfig(options) {
  const width = getWidth(options.el);
  const height = width/2.5;
  return {
    el: options.el,
    r: height / 8,
    fontSize: width / 25,
    margin: height / 30,
    width,
    height: height / 4,
  };
}