import { Component, OnInit } from '@angular/core';
import { PageRoute, RouterExtensions } from '@nativescript/angular';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { PickerProvider } from '~/core/entities/picker-provider';
import { UnitRegistrationAllOutput } from '~/pages/unit/entities/output/unitRegistrationAllOutput';
import { UnitRegistrationMembersAgeOutput } from '~/pages/unit/entities/output/unitRegistrationMembersAgeOutput';
import { UnitRegistrationMembersCategoryOutput } from '~/pages/unit/entities/output/unitRegistrationMembersCategoryOutput';
import { UnitRegistrationMembersUnitsOutput } from '~/pages/unit/entities/output/unitRegistrationMembersUnitsOutput';
import { LoadUnitRegistrationMembers, LoadUnitRegistrations } from '~/pages/unit/state-mgmt/unit-stats.actions';
import { UnitStatsState } from '~/pages/unit/state-mgmt/unit-stats.state';
import { Item } from '~/shared/components/item-picker/item';

@Component({
    selector: 'UnitStats',
    moduleId: module.id,
    templateUrl: './unit-stats.component.html',
    styleUrls: ['./_unit-stats.component.scss']
})
export class UnitStatsComponent implements OnInit {
    @Select(UnitStatsState.getUnitRegistrations) unitRegistrations$: Observable<UnitRegistrationAllOutput[]>;
    @Select(UnitStatsState.getUnitRegistrationMembersUnits) unitRegistrationMembersUnits$: Observable<UnitRegistrationMembersUnitsOutput[]>;
    @Select(UnitStatsState.getUnitRegistrationMembersAges) unitRegistrationMembersAges$: Observable<UnitRegistrationMembersAgeOutput[]>;
    @Select(UnitStatsState.getUnitRegistrationMembersCategories) unitRegistrationMembersCategories$: Observable<UnitRegistrationMembersCategoryOutput[]>;
    @Select(UnitStatsState.isLoading) isLoading$: Observable<boolean>;
    registrationYearsProvider$: Observable<PickerProvider[]>;
    unitId: number;
    registrationYear: Item;
    unitRegistrationMembersAges: UnitRegistrationMembersAgeOutput[];

    constructor(
        private routerExtensions: RouterExtensions,
        private pageRoute: PageRoute,
        private store: Store
    ) {
    }

    /**
     * In hook I dispatch action for loading data using unitId from params.
     * It subscribe data too.
     *
     */
    ngOnInit(): void {
        this.pageRoute.activatedRoute
            .pipe(
                switchMap(activatedRoute => activatedRoute.params)
            )
            .forEach((params) => {
                this.unitId = +params['unitId'];

                if (this.unitId) {
                    this.store.dispatch(new LoadUnitRegistrations(this.unitId));
                }
            });
        this.unitRegistrationMembersAges$.subscribe(unitRegMembersAges => this.unitRegistrationMembersAges = unitRegMembersAges);
        this.registrationYearsProvider$ = this.unitRegistrations$.pipe(
            map(x => x
                .filter((registration: UnitRegistrationAllOutput) => registration.IsAccepted && registration.IsDelivered)
                .map((registration: UnitRegistrationAllOutput) => new PickerProvider(registration.ID, registration.Year + ''))
                .sort((a, b) => +b.label - +a.label)
            )
        );
    }

    /**
     * Callback called if registration year from picker was select / change,
     * then set property and dispatch action for load registration members
     *
     * @param {number|string} registrationId
     */
    onSelectedRegistrationYear(registrationId: number | string) {
        if (!this.registrationYear || this.registrationYear.id !== registrationId) {
            this.registrationYear = new Item(registrationId);
            this.store.dispatch(new LoadUnitRegistrationMembers(+registrationId));
        }
    }

    onBackButton(): void {
        this.routerExtensions.back();
    }
}
