import { SimpleChanges, OnChanges } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { ChordDiagram } from './d3/chord-diagram';

@Component({
    selector: 'onguard-chord-diagram',
    templateUrl: './chord-diagram.component.html',
    styleUrls: ['./chord-diagram.component.scss'],
})
export class ChordDiagramComponent implements OnInit, OnChanges {
    @Input()
    public width = 750;

    @Input()
    public height = 400;

    @Input()
    public chordSpacing = 1 * (Math.PI / 360);

    @Input()
    public minSpreadFactor = 0.2;

    @Input()
    public outlineWidth = 0.1;

    @Input()
    public data: number[][];

    @Input()
    public labels: string[] = [];

    @Input()
    public baseThickness = 5;

    @Input()
    public baseCornerRadius = 2;

    @Input()
    public baseSquaredInterior = false;

    @Input()
    public baseColor: string = null;

    @Input()
    public padding = 20;

    @Input()
    public labelOffset = 15;

    @Input()
    public chordWidthFactor = 0.8;

    @Input()
    public dropShadow = false;

    @Input()
    public dropShadowOffset = [1, 1];

    @Input()
    public drowShadowStandardDeviation = 4;

    @Input()
    public colors = {
        domain: [1, 5, 10],
        range: ['red', 'yellow', 'green'],
    };

    @Input()
    public textStyle: 'horizontal' | 'perpendicular' | 'tangent' = 'horizontal';

    private diagram: ChordDiagram;

    constructor() {}

    ngOnInit(): void {
        this.diagram = new ChordDiagram(this.data, { ...this });
        this.diagram.render('.chord-diagram');
    }

    ngOnChanges(changes: SimpleChanges): void {
        // Redraw
        if (this.diagram) {
            this.diagram.render('.chord-diagram', { ...this });
        }
    }
}