'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-bae2a754.js');

const sparkleCompassCss = "#compassImage{position:absolute;z-index:1;width:100%}#compassOverImage{position:absolute;z-index:30;top:11.6%;left:11.8%;width:76.5%;height:76.5%}.myCanvas{position:relative;z-index:20}#container{display:inline-block;margin:0 auto;position:relative}";

const SparkleCompass = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  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 (index.h("div", { id: "container" }, index.h("img", { id: "compassImage", class: "src-image", src: index.getAssetPath(`../assets/img/compass.png`) }), index.h("canvas", { class: "myCanvas" }, "Your browser does not support the HTML5 canvas tag."), index.h("img", { id: "compassOverImage", src: index.getAssetPath(`../assets/img/compass-over.png`) })));
  }
  get el() { return index.getElement(this); }
};
SparkleCompass.style = sparkleCompassCss;

exports.sparkle_compass = SparkleCompass;
