import { r as registerInstance, h, F as Fragment, H as Host } from './index-c04b9ed5.js';

const compassSvgCss = ":host{display:block}.donut-ring{stroke:#000;stroke-width:1px}text{font-size:30px;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-family:'Roboto Slab', serif}";

const CompassSvg = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.circles = [];
    this.segmentTexts1 = [
      {
        id: "relationships",
        text: "RelationShips",
        angle: 180
      },
      {
        id: "emotions",
        text: "Emotions",
        angle: 225
      },
      {
        id: "spirituality",
        text: "Spirituality",
        angle: 270
      },
      {
        id: "restAndPlay",
        text: "Rest & Play",
        angle: 315
      }
    ];
    this.segmentTexts2 = [
      {
        id: "vocation",
        text: "Vocation",
        angle: -180
      },
      {
        id: "organization",
        text: "Organization",
        angle: -225
      },
      {
        id: "careforbody",
        text: "Care for body",
        angle: -270
      },
      {
        id: "resilience",
        text: "Resilience",
        angle: -315
      }
    ];
    this.colors = ["indigo", "green", "blue", "violet", "lightgray", "cyan", "magenta", "red"];
    //colors = ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"];
    this.strokeWidth = 30;
    this.polygonRadius = 100;
    this.polygonWidth = 60;
    this.borderGaps = 60;
    this.segments = [1, 2, 3, 4, 5, 6, 7, 8];
    this.radius = 460;
    this.cx = this.radius + this.strokeWidth * 3;
    this.cy = this.radius + this.strokeWidth * 3;
    this.svgHeight = this.radius + this.strokeWidth * 3;
    this.svgWidth = this.radius + this.strokeWidth * 3;
    this.calculateStrokeDashOffset = (radius) => {
      let circumference = (2 * Math.PI * radius);
      const strokeDiff = (12.5 / 100) * circumference;
      return circumference - strokeDiff;
    };
  }
  //  distanceX = (1.414 * this.radius - this.radius) * 0.5;
  componentWillLoad() {
    let radius = this.radius;
    for (let i = 0; i <= 10; i++) {
      if (i == 0) {
        this.circles.push({
          cx: this.cx,
          cy: this.cy,
          radius: radius,
          strokeWidth: this.strokeWidth * 3
        });
        radius -= this.strokeWidth;
      }
      else if (i == 1) {
        this.circles.push({
          cx: this.cx,
          cy: this.cy,
          radius: radius,
          strokeWidth: this.strokeWidth * 1.5
        });
        radius -= this.strokeWidth;
      }
      else {
        this.circles.push({
          cx: this.cx,
          cy: this.cy,
          radius: radius,
          strokeWidth: this.strokeWidth
        });
      }
      radius -= this.strokeWidth;
    }
  }
  getXCordinate(angle) {
    console.log(angle);
    return this.cx + (this.radius - (this.strokeWidth * 1.8)) * Math.cos(angle * Math.PI / 180);
  }
  getYCordinate(angle) {
    return this.cy + (this.radius - (this.strokeWidth * 1.8)) * Math.sin(angle * Math.PI / 180);
  }
  render() {
    return (h(Host, null, h("div", null, h("svg", { height: this.svgHeight, width: this.svgWidth, viewBox: `0 0 ${this.svgWidth * 2} ${this.svgHeight * 2}`, class: "donut" }, this.circles.map((circle, circleIndex) => {
      return this.segments.map((item, index) => [
        h("circle", { class: "donut-ring", cx: circle.cx, cy: circle.cy, r: circle.radius + circle.strokeWidth, fill: "transparent", "stroke-width": "0.5", stroke: "#000" }),
        h(Fragment, null, circleIndex > 1 ?
          h("circle", { class: "rect", cx: circle.cx, cy: circle.cy, r: circle.radius, stroke: this.colors[index], "stroke-width": circle.strokeWidth, "stroke-dasharray": `${2 * Math.PI * circle.radius * 0.125}, ${(2 * Math.PI * circle.radius) - (2 * Math.PI * circle.radius * 0.125)}`, "stroke-dashoffset": this.calculateStrokeDashOffset(circle.radius), fill: "transparent", transform: `rotate(${index * 45}, ${circle.cx}, ${circle.cy})` }) :
          h("circle", { class: "rect", cx: circle.cx, cy: circle.cy, r: circle.radius, stroke: "none", "stroke-width": circle.strokeWidth, "stroke-dasharray": `${2 * Math.PI * circle.radius * 0.125}, ${(2 * Math.PI * circle.radius) - (2 * Math.PI * circle.radius * 0.125)}`, "stroke-dashoffset": this.calculateStrokeDashOffset(circle.radius), fill: "transparent", transform: `rotate(${index * 45}, ${circle.cx}, ${circle.cy})` }))
      ]);
    }), h("defs", null, this.segmentTexts1.map((item) => {
      return h("path", { id: item.id, d: `M${this.getXCordinate(item.angle)},${this.getYCordinate(item.angle)} A${this.radius},${this.radius} 0 0,1 ${this.getXCordinate(item.angle + 45)},${this.getYCordinate(item.angle + 45)}` });
    }), this.segmentTexts2.map((item) => {
      return h("path", { id: item.id, d: `M${this.getXCordinate(item.angle)},${this.getYCordinate(item.angle)} A${this.radius},${this.radius} 0 0,0 ${this.getXCordinate(item.angle - 45)},${this.getYCordinate(item.angle - 45)}` });
    })), h("g", { fill: "black", stroke: "none" }, h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#spirituality" }, "spirituality")), h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#restAndPlay" }, "Rest & Play")), h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#resilience" }, "Resilience")), h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#careforbody" }, "Care for Body ")), h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#vocation" }, "vocation")), h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#organization" }, "Organization")), h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#relationships" }, "Relationships")), h("text", { x: "20", y: "0", "text-anchor": "start" }, h("textPath", { xlinkHref: "#emotions" }, "Emotions"))), h("line", { x1: this.cx - this.radius + (this.radius / 4), y1: this.cy - this.radius + (this.radius / 4), x2: this.cx + this.radius - (this.radius / 4), y2: this.cy + this.radius - (this.radius / 4), class: "cross-line", stroke: "#000", "stroke-width": "1" }), h("line", { x1: this.cx + this.radius - (this.radius / 4), y1: this.cy - this.radius + (this.radius / 4), x2: this.cx - this.radius + (this.radius / 4), y2: this.cy + this.radius - (this.radius / 4), class: "cross-line", stroke: "#000", "stroke-width": "1" }), h("polygon", { points: `${this.cx},${this.cy - this.radius - this.borderGaps} ${this.cx + this.polygonWidth},${this.cy - this.polygonWidth} ${this.cx + this.radius + this.borderGaps},${this.cy} ${this.cx + this.polygonWidth},${this.cy + this.polygonWidth} ${this.cx},${this.cy + this.radius + this.borderGaps} ${this.cx - this.polygonWidth},${this.cy + this.polygonWidth} ${this.cx - this.radius - this.borderGaps},${this.cy} ${this.cx - this.polygonWidth},${this.cy - this.polygonWidth}`, fill: "#000" }), h("circle", { cx: this.cx, cy: this.cy, r: "50", stroke: "black", "stroke-width": "3", fill: "#fff" }), h("circle", { cx: this.cx, cy: this.cy, r: "40", stroke: "black", "stroke-width": "2", fill: "#fff" })))));
  }
};
CompassSvg.style = compassSvgCss;

export { CompassSvg as compass_svg };
