import { Component, Input } from '@angular/core';
import { RouterExtensions } from '@nativescript/angular';
import { personDetailIcon } from '~/constants/icons';
import { transitionOptions } from '~/constants/shared.constants';
import { CongEventCandidateOutput, CongEventDetailOutput } from '~/pages/event/entities/cong-event-detail.types';


export enum CandidateState {
    APPROVED = 'approved',
    DISAPRROVED = 'disapproved',
    CONFIRM = 'confirm',
}
@Component({
    selector: 'CongEventCandidateList',
    templateUrl: 'cong-event-candidate-list.component.html',
    styleUrls: ['./_cong-event-candidate-list.component.scss']
})
export class CongEventCandidateListComponent {

    @Input()
    eventDetail: CongEventDetailOutput;
    @Input()
    isLoading: boolean = true;
    private _listItems: (CongEventCandidateOutput | any)[];
    @Input()
    set candidates(val: CongEventCandidateOutput[]) {
        const all = val.map(i => ({
            ...i, type: i.ID_CandidateState
        }));
        this.disapproved = all.filter(i => i.type === CandidateState.DISAPRROVED);
        this.approved = all.filter(i => i.type === CandidateState.APPROVED);
        this.confirm = all.filter(i => i.type === CandidateState.CONFIRM);
        this._listItems = val ? [
            this.initListItems[0], ...this.confirm,
            this.initListItems[1], ...this.disapproved,
            this.initListItems[2], ...this.approved,
        ] : this.initListItems;
    }

    get candidates() {
        return this._listItems
    }
    approved: CongEventCandidateOutput[];
    disapproved: CongEventCandidateOutput[];
    confirm: CongEventCandidateOutput[];

    initListItems = [
        { type: 'confirm_header' },
        { type: 'disapproved_header' },
        { type: 'approved_header' },
    ];
    personDetailIcon = personDetailIcon;

    constructor(
        private routerExtensions: RouterExtensions,
    ) {
    }
    get isFuture() {
        const today = new Date();
        const endDate = new Date(this.eventDetail.EndDate)
        const alEnd = new Date(this.eventDetail.AlternateEndDate)
        return this.eventDetail && (endDate > today || alEnd > today) || this.confirm.length > 0;
    }


    templateSelector({ type }: any) {
        return CandidateState.APPROVED === type || CandidateState.DISAPRROVED === type ? 'person' : type;
    }

    onCandidateDetail(candidate: CongEventCandidateOutput) {
        setTimeout(() => {
            this.routerExtensions.navigate(['event/congressCandidate/',
                candidate.ID], { transition: transitionOptions });
        }, 10);
    }
}