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

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

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

    public displayCharts = false;
    public chartConfig: BarConfig = this._utilitiesService.getHorizontalBarChartConfig();

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

    ngOnChanges() {
        this._loadBarChart();
    }

    private _loadBarChart(): void {
        const dataset: ChartDataset<'bar'> = {
            data: [...this.values],
            label: this.label,
            backgroundColor: this.colors.backgroundColor,
            borderColor: this.colors.borderColor,
            borderWidth: 1,
        };
        this.chartConfig.barChartData.labels = [...this.names];
        this.chartConfig.barChartData.datasets!.push(dataset);
        this.chartConfig.barChartLegend = this.legend;
        this.displayCharts = true;
    }
}