import { Component, Input, OnChanges } from '@angular/core';
//import { ChartDataset } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

import { UtilitiesService } from '@services';
import { CircleConfig } from '@models';

@Component({
    selector: 'app-circle-chart',
    standalone: true,
    imports: [
        BaseChartDirective
    ],
    templateUrl: './circle-chart.component.html'
})
export class CircleChartComponent implements OnChanges {
    public displayCharts = false;
    public chartConfig: CircleConfig = this._utilitiesService.getCircleChartConfig();

    constructor(
        private _utilitiesService: UtilitiesService
    ) { }

    @Input() names: string[] = [];
    @Input() values: number[] = [];
    @Input() headers: string[] = [];
    @Input() color: number = 0;
    @Input() label: string = 'Nombre total de sauts';
    @Input() legend: boolean = false;

    ngOnChanges() {
        this._loadCircleChart();
    }

    private _loadCircleChart(): void {
        this.chartConfig.circleChartLabels = [...this.names];
        this.chartConfig.circleChartDatasets[0].data = [...this.values];
        this.chartConfig.circleChartDatasets[0].label = this.label;
        this.chartConfig.circleChartDatasets[0].backgroundColor = [
            this._utilitiesService.getSeriesColors(0.9, 'pastels')[this.color],
            'rgba(255, 255, 255, 0.05)'
        ];
        this.chartConfig.circleChartDatasets[0].borderColor = [
            this._utilitiesService.getSeriesColors(1, 'pastels')[this.color],
            'rgba(255, 255, 255, 0.05)'
        ];
        this.chartConfig.circleChartDatasets[0].borderWidth = 0;
        this.chartConfig.circleChartLegend = this.legend;
        this.displayCharts = true;
    }

    /*private _loadCircleChart(): void {
        const dataset: ChartDataset<'circle'> = {
            data: [...this.values],
            label: 'Nombre total de sauts',
            backgroundColor: this._utilitiesService.getSeriesColors(0.8),
            borderColor: this._utilitiesService.getSeriesColors(1),
            borderWidth: 1
        };
        this.chartConfig.circleChartLabels = [...this.names];
        this.chartConfig.circleChartDatasets!.push(dataset);
        this.displayCharts = true;
    }*/
}