import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Select, Store } from '@ngxs/store';
import { RouterExtensions } from '@nativescript/angular';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { ActionsExecuting, actionsExecuting } from '@ngxs-labs/actions-executing';
import { CongEventDecisionOutput, CongEventDetailOutput, CongEventFunctionAllMaxOutput } from '~/pages/event/entities/cong-event-detail.types';
import { LoadCongEventCandidates, LoadCongEventDecisions, LoadCongEventDetail, LoadCongEventFunctions, LoadCongEventFunctionsMax } from '~/pages/event/state-mgmt/cong/cong-event-detail.actions';
import { CongEventDetailState } from '~/pages/event/state-mgmt/cong/cong-event-detail.state';
import { CongEventCandidateOutput, CongEventFunctionOutput } from './../../../entities/cong-event-detail.types';

export enum CongEventTabs {
    BASE_DETAIL = 0,
    CANDIDATES = 1,
    VOTE = 2,
    DECISION = 3,
}


@Component({
    selector: 'CongEventDetailPage',
    moduleId: module.id,
    templateUrl: './cong-event-detail-page.component.html',
})
export class CongEventDetailPageComponent implements OnInit {
    @Select(actionsExecuting([
        LoadCongEventDetail, LoadCongEventFunctionsMax, LoadCongEventCandidates,
        LoadCongEventDecisions, LoadCongEventFunctions,
    ]))
    isLoading$: Observable<ActionsExecuting>;

    @Select(CongEventDetailState.getEventDetail)
    eventDetail$: Observable<CongEventDetailOutput>;
    @Select(CongEventDetailState.getCandidates)
    candidates$: Observable<CongEventCandidateOutput[]>;
    @Select(CongEventDetailState.getFunctionsMax)
    functionsMax$: Observable<CongEventFunctionAllMaxOutput[]>;
    @Select(CongEventDetailState.getFunctions)
    functions$: Observable<CongEventFunctionOutput[]>;
    @Select(CongEventDetailState.getDecisions)
    decisions$: Observable<CongEventDecisionOutput[]>;


    groupedFunctions$: Observable<{ [key: string]: CongEventCandidateOutput[] }>

    selectedIndex = CongEventTabs.BASE_DETAIL;
    eventId: number;
    constructor(
        private routerExtensions: RouterExtensions,
        private route: ActivatedRoute,
        private store: Store,
    ) {
    }
    ngOnInit(): void {
        this.route.params.subscribe(params => {
            this.eventId = parseInt(params['id'], 10);
            this.selectedIndex = parseInt(params['section'], 10) || CongEventTabs.BASE_DETAIL;
        })
        this.groupedFunctions$ = this.candidates$.pipe(
            map(candidates => {
                return candidates.reduce((acc, curr) => {
                    if (curr.EventCongressFunction in acc) {
                        acc[curr.EventCongressFunction].push(curr);
                    } else {
                        acc[curr.EventCongressFunction] = [curr];

                    }
                    return acc;
                }, {})
            }
            ))
    }

    loadCongDetail() {
        this.store.dispatch(new LoadCongEventDetail(this.eventId))
    }
    loadVoteData() {
        this.store.dispatch([
            new LoadCongEventFunctionsMax(this.eventId),
            new LoadCongEventFunctions(this.eventId),
            new LoadCongEventCandidates(this.eventId)
        ])
    }

    loadCandidates() {
        this.store.dispatch([new LoadCongEventCandidates(this.eventId)])
    }

    loadDecisions() {
        this.store.dispatch(new LoadCongEventDecisions(this.eventId))
    }
    onBackButton(): void {
        this.routerExtensions.back();
    }

    setIndex(i) {
        this.selectedIndex = i.newIndex;
    }
}