import { DatePipe } from '@angular/common';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute } from '@angular/router';
import { MatBadgeModule } from '@angular/material/badge';
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 { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { Observable, Subscription } from 'rxjs';

import { MenuItems } from '@components/shared';
import { HistoryTableComponent } from '@components/shared/helpers-jump';
import { BarsChartComponent, PieChartComponent } from '@components/shared/helpers-chart';
import { Jump, AeronefsPageData } from '@models';
import { UtilitiesService } from '@services';
import { AeronefByImat, AeronefByYear } from '@models';

@Component({
    selector: 'app-aeronefs',
    standalone: true,
    imports: [
        DatePipe,
        MatBadgeModule, MatButtonModule, MatCardModule, MatDividerModule,
        MatExpansionModule, MatGridListModule, MatIconModule, MatMenuModule,
        BarsChartComponent, HistoryTableComponent, PieChartComponent
    ],
    templateUrl: './aeronefs.component.html',
    styleUrl: './aeronefs.component.scss',
    animations: [
        trigger('flyInOut', [
            state('in', style({ transform: 'translateX(0)' })),
            transition('void => *', [
                style({ transform: 'translateX(-100%)' }),
                animate(200)
            ]),
            transition('* => void', [
                style({ transform: 'translateX(100%)' }),
                animate(200)
            ])
        ])
    ]
})
export class AeronefsComponent implements OnInit, OnDestroy {
    private _data: Subscription = new Subscription();
    private _aeronefsByImat!: Array<AeronefByImat>;
    private _aeronefsByYear!: Array<AeronefByYear>;
    public lastJump: Jump = {} as Jump;
    public title = 'Aéronefs';
    public subtitle: string = 'Nombre total de sauts par aéronef';
    public displayCharts = false;
    public destroyRef = inject(DestroyRef);
    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();

    constructor(
        private route: ActivatedRoute,
        private _utilitiesService: UtilitiesService,
        public menuItems: MenuItems
    ) { }

    ngOnInit() {
        const data$: Observable<{ aeronefsPageData: AeronefsPageData }> = this.route.data as Observable<{ aeronefsPageData: AeronefsPageData }>;
        this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { aeronefsPageData: AeronefsPageData }) => {
            const pageData: AeronefsPageData = data.aeronefsPageData;
            this.lastJump = pageData.lastjump;
            this._loadAeronefByImat(pageData);
        });
    }

    ngOnDestroy() {
        this._data.unsubscribe();
    }

    private _loadAeronefByImat(pageData: AeronefsPageData): void {
        this._aeronefsByImat = pageData.aeronefsByImat.map((row: AeronefByImat) => {
            this.seriesName.push(`${row.aeronef} ${row.imat}`);
            this.seriesValue.push(row.count);
            return row;
        });
        this._loadAeronefByYear(pageData);
    }

    private _loadAeronefByYear(pageData: AeronefsPageData): 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]);
        });
        this._aeronefsByYear = pageData.aeronefsByImatByYear.map((row: AeronefByYear) => {
            const aeronef: string = row.aeronef;
            const imat: string = row.imat;
            const year: string = row.year.toString();
            this.seriesRow[this.seriesName.indexOf(`${aeronef} ${imat}`)][this.seriesHeader.indexOf(year)] = row.count;
            return row;
        });
        this.displayCharts = true;
    }
}