import { Component, OnInit } from '@angular/core';
import { PageRoute, RouterExtensions } from '@nativescript/angular';
import { Page } from '@nativescript/core';
import { Select, Store } from '@ngxs/store';
import { Observable, Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { FunctionAllPersonOutput } from '~/pages/search-person/entities/output/functionAllPersonOutput';
import { MembershipAllPersonOutput } from '~/pages/search-person/entities/output/membershipAllPersonOutput';
import { OfferAllOutput } from '~/pages/search-person/entities/output/offerAllOutput';
import { PersonContactAllOutput } from '~/pages/search-person/entities/output/personContactAllOutput';
import { PersonDetailOutput } from '~/pages/search-person/entities/output/personDetailOutput';
import { PersonOtherDetailOutput } from '~/pages/search-person/entities/output/personOtherDetailOutput';
import { PersonPhotoOutput } from '~/pages/search-person/entities/output/personPhotoOutput';
import { QualificationAllOutput } from '~/pages/search-person/entities/output/qualificationAllOutput';
import {
    ClearPersonDetailData,
    LoadPersonContacts,
    LoadPersonDetail,
    LoadPersonFunctions,
    LoadPersonMemberships,
    LoadPersonOffers,
    LoadPersonOtherDetail,
    LoadPersonPhoto,
    LoadPersonQualifications
} from '~/pages/search-person/state-mgmt/search-person-detail.actions';
import { SearchPersonDetailState } from '~/pages/search-person/state-mgmt/search-person-detail.state';

@Component({
    selector: 'SearchPersonDetail',
    moduleId: module.id,
    templateUrl: './search-person-detail.component.html',
    styleUrls: ['./_search-person-detail.component.scss']
})
export class SearchPersonDetailComponent implements OnInit {
    @Select(SearchPersonDetailState.isLoading) isLoading$: Observable<boolean>;
    @Select(SearchPersonDetailState.getPersonDetail) personDetail$: Observable<PersonDetailOutput>;
    @Select(SearchPersonDetailState.getPersonOtherDetail) personOtherDetail$: Observable<PersonOtherDetailOutput>;
    @Select(SearchPersonDetailState.getPersonPhoto) personPhoto$: Observable<PersonPhotoOutput>;
    @Select(SearchPersonDetailState.getPersonContacts) personContacts$: Observable<PersonContactAllOutput[]>;
    @Select(SearchPersonDetailState.getPersonMemberships) personMemberships$: Observable<MembershipAllPersonOutput[]>;
    @Select(SearchPersonDetailState.getPersonFunctions) personFunctions$: Observable<FunctionAllPersonOutput[]>;
    @Select(SearchPersonDetailState.getPersonQualifications) personQualifications$: Observable<QualificationAllOutput[]>;
    @Select(SearchPersonDetailState.getPersonOffers) personOffers$: Observable<OfferAllOutput[]>;
    personDetail: PersonDetailOutput;
    isDetailFromCatalog: boolean;
    personDetailSubscription: Subscription;

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

    /**
     * In OnInit hook I dispatched Actions.
     *
     * I dispatch Actions in it (personDetail, photo and contacts).
     * Others Action are dispatched only if detail is from catalog (skautsky adresar) and
     * person have enabled displaying others infos using properties (DisplayQualification, etc.)
     *
     * @returns {Promise<void>}
     */
    async ngOnInit() {
        this.pageRoute.activatedRoute
            .pipe(
                switchMap(activatedRoute => activatedRoute.params)
            )
            .forEach((params) => {
                this.store.dispatch(new LoadPersonDetail(+params['personId']));
                this.store.dispatch(new LoadPersonPhoto(+params['personId']));
                this.store.dispatch(new LoadPersonContacts(+params['personId']));

                this.isDetailFromCatalog = params['isCatalog'] === 'true';

                this.personDetailSubscription = this.personDetail$.subscribe(personDetail => {
                    if (personDetail) {
                        this.personDetail = personDetail;
                        if (this.isDetailFromCatalog) {
                            console.log('call services in detail section');
                            if (personDetail.DisplayQualification) {
                                this.store.dispatch(new LoadPersonQualifications(+params['personId']));
                            }
                            if (personDetail.DisplayMembership) {
                                this.store.dispatch(new LoadPersonMemberships(+params['personId']));
                            }
                            if (personDetail.DisplayFunction) {
                                this.store.dispatch(new LoadPersonFunctions(+params['personId']));

                            }
                            if (personDetail.DisplayOffer) {
                                this.store.dispatch(new LoadPersonOffers(+params['personId']));
                            }
                        } else {
                            console.log('call services out detail section');
                            this.store.dispatch(new LoadPersonFunctions(+params['personId']));
                            this.store.dispatch(new LoadPersonQualifications(+params['personId']));
                            this.store.dispatch(new LoadPersonMemberships(+params['personId']));
                            this.store.dispatch(new LoadPersonOffers(+params['personId']));
                            this.store.dispatch(new LoadPersonOtherDetail(+params['personId']));
                        }
                    }
                });
            });

        this.page.on('navigatingFrom', (data) => {
            console.log('now going AWAY from the page');
            if (this.personDetailSubscription) {
                this.personDetailSubscription.unsubscribe();
                this.personDetailSubscription = undefined;
            }
            this.store.dispatch(new ClearPersonDetailData());
        });
    }

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