import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
//import { ChartConfiguration } from 'chart.js';
import { Observable, Subscription } from 'rxjs';

import { MenuItems } from '@components/shared';
import { PieChartComponent } from '@components/shared/helpers-chart';
import { HistoryTableComponent } from '@components/shared/helpers-jump';
import { UtilitiesService, DropZonesService } from '@services';
import { DropZoneByOaci, DropZoneByYear } from '@models';

@Component({
    selector: 'app-dropzones-pie',
    imports: [
        MatButtonModule,
        MatCardModule,
        MatDividerModule,
        MatExpansionModule,
        MatIconModule,
        MatMenuModule,
        PieChartComponent,
        HistoryTableComponent,
    ],
    templateUrl: './dropzones-pie.component.html',
})
export class DropzonesPieComponent implements OnInit, OnDestroy {
    private _dropzonesService = inject(DropZonesService);
    private _utilitiesService = inject(UtilitiesService);
    menuItems = inject(MenuItems);

    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: Array<Array<number>> = [];
    public seriesColor: {
        backgroundColor: string[];
        borderColor: string[];
    } = {
        backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
        borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
    };
    public seriesColorClass: string[] = this._utilitiesService.getChartColors();
    public destroyRef = inject(DestroyRef);

    ngOnInit() {
        this._loadDropZoneByOaci();
    }

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

    private _loadDropZoneByOaci(): void {
        const dropzones$: Observable<Array<DropZoneByOaci>> = this._dropzonesService
            .getAllByOaci()
            .pipe(takeUntilDestroyed(this.destroyRef));
        this._dropzoneByOaci = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
            this._dropzonesByOaci = aggregate.map((row: DropZoneByOaci) => {
                this.seriesName.push(`${row.oaci} - ${row.lieu}`);
                this.seriesValue.push(row.count);
                return row;
            });
            this._loadDropZoneByYear();
        });
    }

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