import { autoinject, customElement, TaskQueue } from "aurelia-framework";
import { bindable } from "aurelia-typed-observable-plugin";

@customElement("ui-circular-progress")
@autoinject
export class UICircularProgress {
    private circle: SVGElement;
    radius: number;
    circumference: number;

    @bindable
    value: number = 0;
    constructor(private taskQueue: TaskQueue) {
    }
    attached() {
        this.taskQueue.queueMicroTask(() => {
            this.radius = (this.circle as any).r.baseVal.value;
            this.circumference = this.radius * 2 * Math.PI;
            this.circle.style.strokeDasharray = `${this.circumference} ${this.circumference}`;
            this.circle.style.strokeDashoffset = `${this.circumference}`;            
        });
        
    }    
    valueChanged(newVal, oldVal) {
        this.setProgress(this.value);
    }
    setProgress(percent) {
        this.taskQueue.queueMicroTask(() => {
            const offset = this.circumference - percent / 100 * this.circumference;
            this.circle.style.strokeDashoffset = offset.toString();    
        });
    }
}








