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

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

@Component({
    selector: 'app-pie-chart',
    imports: [BaseChartDirective],
    templateUrl: './pie-chart.component.html',
})
export class PieChartComponent implements OnChanges {
    private _utilitiesService = inject(UtilitiesService);

    public displayCharts = false;
    public chartConfig: DoughnutConfig = this._utilitiesService.getDoughnutChartConfig();

    @Input() names: string[] = [];
    @Input() values: number[] = [];
    @Input() headers: string[] = [];
    @Input() colors: {
        backgroundColor: string[];
        borderColor: string[];
    } = {
        backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
        borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
    };
    @Input() legend: boolean = false;

    ngOnChanges() {
        this._loadDoughnutChart();
    }

    private _loadDoughnutChart(): void {
        this.chartConfig.doughnutChartLabels = [...this.names];
        this.chartConfig.doughnutChartDatasets[0].data = [...this.values];
        this.chartConfig.doughnutChartDatasets[0].label = 'Nombre total de sauts';
        this.chartConfig.doughnutChartDatasets[0].backgroundColor = this.colors.backgroundColor;
        this.chartConfig.doughnutChartDatasets[0].borderColor = this.colors.borderColor;
        this.chartConfig.doughnutChartDatasets[0].borderWidth = 2;
        this.chartConfig.doughnutChartLegend = this.legend;
        this.displayCharts = true;
    }

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