import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import * as d3 from 'd3';
import gauge from './gauge';

@Component({
    selector: 'onguard-gauge',
    templateUrl: './gauge.component.html',
    styleUrls: ['./gauge.component.scss'],
})
export class GaugeComponent implements OnInit, AfterViewInit {
    @ViewChild('gaugeElement') gaugeRef: ElementRef;

    private gaugeUpdateRef;
    private _score = 0;

    @Input() title = 'MOS Score';
    @Input() min = 1;
    @Input() max = 10;

    @Input() set score(score: number) {
        if (this.gaugeUpdateRef) {
            this.gaugeUpdateRef(score, this.max);
        } else {
            this._score = score;
        }
    }

    constructor() {
        // @ts-ignore: Unreachable code error
        window.d3 = d3;
    }

    ngOnInit(): void {}

    ngAfterViewInit(): void {
        this.gaugeUpdateRef = gauge(
            d3,
            this.gaugeRef.nativeElement,
            this.title,
            this.min,
            this.max,
        );
        this.gaugeUpdateRef(this._score, this.max);
    }
}