const doc = { w: 100, h: 40 };
const gridStepSize = 10;

const lines = [
  { d: `M10 10 L 10 30 L 30 30`, color: "var(--_red)" },
  { d: `M40 10 l 0 20 l 20 0`, color: "var(--_blue)" },
  { d: `M70 10 l 0 20 L 90 30`, color: "var(--_green)" }
];

function drawPaths() {
  const els = [];
  lines.forEach(({ d, color }) => {
    const path = makeSVGEl("path", {
      d,
      stroke: color,
      "stroke-width": 1.5,
      fill: "none"
    });
    els.push(path);
  });
  return els;
}

/**
 * SVG Example Boilerplate Stuff
 */
const title = "Compound Angular Paths on a grid.";
const gridBuffer = { x: 10, y: 5 };
const width = doc.w + (gridBuffer?.x || 0);
const height = doc.h + (gridBuffer?.y || 0);
const animationControlBtn = document.querySelector("[data-play-pause]");
const animationResetBtn = document.querySelector("[data-reset]");
const container = document.querySelector("[data-svg-container]");
const renderHandleCheckBox = document.getElementById("render-handle");
const gridStrokeWidth = 0.2;
const cutoffCorrection = (gridStrokeWidth / 2) * -1;
const gridColor = "currentColor";

function makeSVG(title, svgContentChildrenArray = []) {
  const svg = makeSVGEl("svg", {
    viewBox: `${cutoffCorrection} ${cutoffCorrection} ${width} ${height}`,
    xmlns: "http://www.w3.org/2000/svg",
    role: "img"
  });

  const titleEl = makeSVGEl("title");
  titleEl.textContent = title;
  svg.appendChild(titleEl);

  const grid = drawGrid();
  svg.appendChild(grid);

  svgContentChildrenArray.forEach((child) => svg.appendChild(child));
  return svg;
}

const svg = makeSVG(title, drawPaths());
container.appendChild(svg);

function drawGrid(
  sW = gridStrokeWidth,
  c = gridColor,
  labelStyle = "font-size:5px;font-family:monospace"
) {
  const totalHorizontalLines = Math.floor(doc.h / gridStepSize);
  const totalVerticalLines = Math.floor(doc.w / gridStepSize);

  const g = makeSVGEl("g", { class: "grid", style: `opacity: 0.8;` });
  const yAxisLabels = makeSVGEl("g", {
    class: "y-axis-labels",
    style: labelStyle
  });
  const xAxisLabels = makeSVGEl("g", {
    class: "x-axis-labels",
    style: labelStyle
  });
  let pathDefinitionString = "";
  for (let i = 0; i < totalHorizontalLines; i++) {
    pathDefinitionString += `M0 ${i * gridStepSize} H${width}`;
    const labelEl = makeSVGEl("text", {
      x: width,
      y: i * gridStepSize,
      dy: "1em",
      dx: "-0.4em",
      fill: c,
      "text-anchor": "end"
    });
    labelEl.textContent = i === 0 ? "y" : i * gridStepSize;
    yAxisLabels.appendChild(labelEl);
  }
  for (let i = 0; i < totalVerticalLines; i++) {
    pathDefinitionString += `M${i * gridStepSize} 0 V${height}`;
    const labelEl = makeSVGEl("text", {
      x: i * gridStepSize,
      y: height,
      dy: "-0.4em",
      dx: "0.2em",
      fill: c
    });
    labelEl.textContent = i === 0 ? "x" : i * gridStepSize;
    xAxisLabels.appendChild(labelEl);
  }
  const path = makeSVGEl("path", {
    d: pathDefinitionString,
    stroke: c,
    "stroke-width": sW,
    fill: "none"
  });
  g.appendChild(path);
  g.appendChild(yAxisLabels);
  g.appendChild(xAxisLabels);
  return g;
}

function makeSVGEl(type, attrs) {
  const el = document.createElementNS("http://www.w3.org/2000/svg", type);
  for (let key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
  return el;
}