/*🇿ed's Architect v1 */
export class ZedArchitectV1 {
  constructor(builder) {
    this.builder = builder;
  }
  /*percent2coord*/
  percent2coord(perc, dim) {
    return (perc * dim) / 100;
  }
  /*text*/
  text(svg, x, y, content, size, col) {
    let text = this.builder.element("text", {
      x: x,
      y: y,
      "font-size": size,
      fill: col,
      "dominant-baseline": "middle",
      "text-anchor": "middle",
      "font-weight": "bold",
    });
    text.textContent = content;
    return this.builder.append(svg, text);
  }
  /*heart*/
  heart(svg, x, y, size, col) {
    let path = this.builder.element("path", {
      d: `M ${x} ${y} C ${x - size / 2} ${y - size / 2}, ${x - size} ${
        y + size / 3
      }, ${x} ${y + size} C ${x + size} ${y + size / 3}, ${x + size / 2} ${
        y - size / 2
      }, ${x} ${y}`,
      fill: col,
    });
    return this.builder.append(svg, path);
  }
  /*group*/
  group(svg, id, w, h) {
    let g = this.builder.element("g", { id: id, width: w, height: h });
    return this.builder.append(svg, g);
  }
  /*path*/
  path(svg, d, col, scol, sw) {
    let path = this.builder.element("path", {
      d: d,
      fill: col,
      stroke: scol,
      "stroke-width": sw,
    });
    return this.builder.append(svg, path);
  }
  /*line*/
  line(svg, x1, y1, x2, y2, col, w) {
    let line = this.builder.element("line", {
      x1: x1,
      y1: y1,
      x2: x2,
      y2: y2,
      stroke: col,
      "stroke-width": w,
    });
    return this.builder.append(svg, line);
  }
  /*rect*/
  rect(svg, x, y, w, h, col, scol, sw) {
    let rect = this.builder.element("rect", {
      x: x,
      y: y,
      width: w,
      height: h,
      fill: col,
      stroke: scol,
      "stroke-width": sw,
    });
    return this.builder.append(svg, rect);
  }
  /*poly*/
  poly(svg, points, col) {
    let polygon = this.builder.element("polygon", {
      points: points.join(" "),
      fill: col,
    });
    return this.builder.append(svg, polygon);
  }
  /*circle*/
  circle(svg, x, y, r, col, scol, sw) {
    let circle = this.builder.element("circle", {
      cx: x,
      cy: y,
      r: r,
      fill: col,
      stroke: scol,
      "stroke-width": sw,
    });
    return this.builder.append(svg, circle);
  }
  /*ellipse*/
  ellipse(svg, x, y, rx, ry, col) {
    let ellipse = this.builder.element("ellipse", {
      cx: x,
      cy: y,
      rx: rx,
      ry: ry,
      fill: col,
    });
    return this.builder.append(svg, ellipse);
  }
  /*diamond*/
  diamond(svg, x, y, w, h, col) {
    const points = [
      `${x - w},${y}`,
      `${x},${y - h}`,
      `${x + w},${y}`,
      `${x},${y + h}`,
    ];
    return this.poly(svg, points, col);
  }
  /*rotate*/
  rotate(shape, angle, cx, cy) {
    let transform = shape.getAttribute("transform") || "";
    transform += ` rotate(${angle},${cx},${cy})`;
    shape.setAttribute("transform", transform);
    return shape;
  }
  /*mask*/
  mask(svg, originalShape, maskShape) {
    const maskId = `mask-${new Date().getTime()}`;
    let mask = this.builder.element("mask", { id: maskId });
    this.builder.append(mask, maskShape);
    originalShape.setAttribute("mask", `url(#${maskId})`);
    let defs = svg.querySelector("defs") || this.builder.element("defs", {});
    if (!svg.querySelector("defs")) svg.prepend(defs);
    this.builder.append(defs, mask);
    this.builder.append(svg, originalShape);
    return originalShape;
  }
}