import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { ChartConfiguration } from 'chart.js';
import { NgChartsModule } from 'ng2-charts';

import { Observable, Subscription } from 'rxjs';

import { MenuItems, HistoryTableComponent } from 'src/app/components/shared';
import { UtilitiesService, DropZonesService } from 'src/app/core/services';
import { DropZoneByOaci, DropZoneByYear, DoughnutConfig } from 'src/app/core/models';

@Component({
    standalone: true,
    imports: [
        CommonModule,
        MatButtonModule, MatCardModule, MatExpansionModule, MatIconModule, MatMenuModule,
        NgChartsModule,
        HistoryTableComponent
    ],
    selector: 'huapp-drop-zones',
    templateUrl: './drop-zones.component.html'
})
export class DropZonesComponent implements OnInit, OnDestroy {
    private _dropzoneByOaci: Subscription = new Subscription();
    private _dropzoneByYear: Subscription = new Subscription();
    private _dropzonesByOaci!: Array<DropZoneByOaci>;
    private _dropzonesByYear!: Array<DropZoneByYear>;
    public title: string = 'Les dropzones';
    public subtitle: string = 'Nombre total de sauts par dropzone';
    public seriesHeader: string[] = [];
    public seriesName: string[] = [];
    public seriesValue: number[] = [];
    public seriesRow: any[] = [];
    public seriesColor: string[] = this._utilitiesService.getChartColors();
    public displayCharts = false;
    public chartConfig: DoughnutConfig = this._utilitiesService.getDoughnutChartConfig();

    constructor(
        private _dropzonesService: DropZonesService,
        private _utilitiesService: UtilitiesService,
        public menuItems: MenuItems
    ) { }

    ngOnInit() {
        this._loadDropZoneByOaci();
    }

    ngOnDestroy() {
        this._dropzoneByOaci.unsubscribe();
        this._dropzoneByYear.unsubscribe();
    }

    private _loadDropZoneByOaci(): void {
        const dropzones$: Observable<Array<DropZoneByOaci>> = this._dropzonesService.getAllByOaci();
        this._dropzoneByOaci = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
            this._dropzonesByOaci = aggregate.map((row: DropZoneByOaci) => {
                this.chartConfig.doughnutChartLabels.push(`${row._id.oaci} - ${row._id.lieu}`);
                this.chartConfig.doughnutChartDatasets[0].data.push(row.count);
                return row;
            });
            this.seriesName = [...this.chartConfig.doughnutChartLabels];
            this.seriesValue = [...this.chartConfig.doughnutChartDatasets[0].data];
            this.displayCharts = true;
            this._loadDropZoneByYear();
        });
    }

    private _loadDropZoneByYear(): void {
        this.seriesHeader = ["2018", "2019", "2020", "2021", "2022", "2023"];
        let values: Array<number> = this.seriesHeader.map(() => 0);
        this.seriesName.forEach(() => {
            this.seriesRow.push([...values]);
        });
        const dropzones$: Observable<Array<DropZoneByYear>> = this._dropzonesService.getAllByDate();
        this._dropzoneByYear = dropzones$.subscribe((aggregate: Array<DropZoneByYear>) => {
            this._dropzonesByYear = aggregate.map((row: DropZoneByYear) => {
                let lieu: string = row._id.lieu;
                let oaci: string = row._id.oaci;
                let year: string = row._id.year.toString();
                this.seriesRow[this.seriesName.indexOf(`${oaci} - ${lieu}`)][this.seriesHeader.indexOf(year)] = row.count;
                return row;
            });
        });
    }
}
