import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  OnChanges,
  OnDestroy,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { Chart } from 'chart.js/auto';
import { PluginNodata } from './plugin-nodata';
import { PluginMoreColors } from './plugin-more-colors';
import { ChartConfig } from './chart-config';
import { ChartConfigService } from './services/chart-config.service';
import { DatasetService } from './services/dataset.service';
import { LabelService } from './services/label.service';
import { OptionsService } from './services/options.service';
import { ScaleService } from './services/scale.service';

@Component({
  selector: 'fbi-chart',
  standalone: true,
  imports: [],
  templateUrl: './chart.component.html',
  styleUrl: './chart.component.scss',
  providers: [
    ChartConfigService,
    DatasetService,
    LabelService,
    OptionsService,
    ScaleService,
  ],
})
export class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
  @ViewChild('chart') canvas!: ElementRef;
  @Input() config!: ChartConfig;
  @Input() data!: Record<string, any>[];

  private chart: any = undefined;

  constructor(private chartConfigService: ChartConfigService) {}

  ngAfterViewInit(): void {
    this.initChart();
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.initChart();
  }

  ngOnDestroy(): void {
    this.chart?.destroy?.();
  }

  private initChart() {
    if (!this.canvas?.nativeElement) return;

    this.chart?.destroy?.();
    const config = this.chartConfigService.chart(this.config, this.data);
    console.log(config);

    config.plugins = [PluginNodata.config(), PluginMoreColors.config()];
    this.chart = new Chart(this.canvas.nativeElement, config);
  }
}