import { Component, Prop, Element, State, Method, getAssetPath, h } from '@stencil/core';
export class SparkleCompass {
  componentDidLoad() {
    this.drawOnCompass();
    window.addEventListener('resize', () => this.drawOnCompass());
    //context.beginPath();
    // context.fillStyle = "rgba(96, 187,70, 0.5)";
    // // Go to center of the Chart
    //context.moveTo(centerX, centerY);
    // // Draw an Arc
    // // arc(centerX, centerY, radius, angleStart, angleEnd)
    // var radius = this.getRadiusFromSection(this.resilence);
    // context.arc(centerX, centerY, radius, 0, Math.PI / 4);
    // // Draw a line to close the pie slice
    // //context.lineTo(centerX, centerY);
    // // Print the path
    // //context.stroke();
    // context.fill();
  }
  // @Listen("window:resize")
  // resize() {
  //     this.drawOnCompass()
  // }
  async drawOnCompass() {
    this.canvas = this.el.querySelector(".myCanvas");
    this.canvase_container = this.el.querySelector("#container");
    this.canvase_container.style.width = "100%";
    this.canvas.width = this.canvase_container.offsetWidth;
    this.canvas.height = this.canvase_container.offsetWidth;
    this.canvas.style.width = this.canvase_container.offsetWidth + "px";
    this.canvas.style.height = this.canvase_container.offsetWidth + "px";
    //this.canvase_container.style.height = this.canvas.offsetWidth + "px";
    var context = this.canvas.getContext('2d');
    var centerX = this.canvas.width / 2;
    var centerY = this.canvas.height / 2;
    //DRAW CARE FOR BODY
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(96, 187,70, 0.5)";
    var radius = this.getRadiusFromSection(this.resiliance);
    context.arc(centerX, centerY, radius, 0, Math.PI / 4);
    context.fill();
    //DRAW CARE FOR BODY
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(96, 187,70, 0.6)";
    var radius = this.getRadiusFromSection(this.care);
    context.arc(centerX, centerY, radius, Math.PI / 4, Math.PI / 2);
    context.fill();
    //DRAW ORGANIZATION
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(44, 160,217, 0.5)";
    var radius = this.getRadiusFromSection(this.organization);
    context.arc(centerX, centerY, radius, Math.PI / 2, Math.PI * 0.75);
    context.fill();
    //DRAW SCHOOL AND WORK
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(44, 160,217, 0.6)";
    var radius = this.getRadiusFromSection(this.school);
    context.arc(centerX, centerY, radius, Math.PI * 0.75, Math.PI);
    context.fill();
    //DRAW RELATIONSHIP
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(220, 24,98, 0.5)";
    var radius = this.getRadiusFromSection(this.relationship);
    context.arc(centerX, centerY, radius, Math.PI, Math.PI * 1.25);
    context.fill();
    //DRAW EMOTIONS
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(220, 24,98, 0.6)";
    var radius = this.getRadiusFromSection(this.emotions);
    context.arc(centerX, centerY, radius, Math.PI * 1.25, Math.PI * 1.5);
    context.fill();
    //DRAW SPIRITUALITY
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(224,117,33, 0.5)";
    var radius = this.getRadiusFromSection(this.spirituality);
    context.arc(centerX, centerY, radius, Math.PI * 1.5, Math.PI * 1.75);
    context.fill();
    //DRAW REST AND PLAY
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle = "rgba(224,117,33, 0.6)";
    var radius = this.getRadiusFromSection(this.rest);
    context.arc(centerX, centerY, radius, Math.PI * 1.75, Math.PI * 2);
    context.fill();
  }
  getRadiusFromSection(section) {
    var defaultRadius = 0.09 * this.canvas.width;
    var sectionRadius = 0.028 * this.canvas.width;
    if (section == 0) {
      return 0;
    }
    else if (section == 1) {
      return defaultRadius;
    }
    else {
      if (section > 5) {
        return defaultRadius + (section - 1) * sectionRadius + 1;
      }
      return defaultRadius + (section - 1) * sectionRadius;
    }
  }
  render() {
    return (h("div", { id: "container" },
      h("img", { id: "compassImage", class: "src-image", src: getAssetPath(`../assets/img/compass.png`) }),
      h("canvas", { class: "myCanvas" }, "Your browser does not support the HTML5 canvas tag."),
      h("img", { id: "compassOverImage", src: getAssetPath(`../assets/img/compass-over.png`) })));
  }
  static get is() { return "sparkle-compass"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-compass.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-compass.css"]
  }; }
  static get properties() { return {
    "resiliance": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "resiliance",
      "reflect": true
    },
    "care": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "care",
      "reflect": true
    },
    "organization": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "organization",
      "reflect": true
    },
    "school": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "school",
      "reflect": true
    },
    "relationship": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "relationship",
      "reflect": true
    },
    "emotions": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "emotions",
      "reflect": true
    },
    "spirituality": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "spirituality",
      "reflect": true
    },
    "rest": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "rest",
      "reflect": true
    }
  }; }
  static get states() { return {
    "canvas": {},
    "canvase_container": {}
  }; }
  static get methods() { return {
    "drawOnCompass": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
