import { Component, EventEmitter, Output, ViewContainerRef } from '@angular/core';
import { Input } from '@angular/core';
import { ModalDialogOptions, ModalDialogService, RouterExtensions } from '@nativescript/angular';
import { transitionOptions } from '~/constants/shared.constants';
import { ListViewEventData } from 'nativescript-ui-listview';
import * as dialogs from "@nativescript/core/ui/dialogs";
import { CampEventDetailOutput, CampEventStatisticDetail } from '~/pages/event/entities/camp-event-detail.types';
import { CampParticipant, participCountCategories, statisticGroups } from '~/pages/event/types/camp';
import { addIcon, deleteIcon, editIcon, personDetailIcon, sortIcon } from '~/constants/icons';
import { EventTimeState, eventTimeState } from '~/pages/event/util/event';
import { ScrollTopBarListComponent } from '../../common/scroll-top-bar-list/scroll-top-bar-list.component';
import { CampEventParticipantUpdateModalComponent } from '../camp-participant-update-modal/camp-event-participant-update-modal.component';
interface ListType extends CampParticipant {
    extended: boolean;
}
@Component({
    selector: 'CampEventParticipantView',
    moduleId: module.id,
    templateUrl: './camp-event-participant-view.component.html',
    styleUrls: ['./_camp-event-participant-view.component.scss']
})
export class CampEventParticipantViewComponent extends ScrollTopBarListComponent<ListType> {
    participCountCategories = participCountCategories;
    statisticGroups = statisticGroups;

    @Input()
    isLoading: boolean = true;
    @Input()
    eventDetail: CampEventDetailOutput;
    @Input()
    statisticDetail: CampEventStatisticDetail;
    @Output()
    openSortModal = new EventEmitter();
    @Output()
    removeParticipant = new EventEmitter<number>();
    @Output()
    updateParticipant = new EventEmitter<CampParticipant>();
    @Output()
    refreshData = new EventEmitter();

    selectedPersonId: number;
    deleteIcon = deleteIcon;
    editIcon = editIcon;
    personDetail = personDetailIcon;
    sortIcon = sortIcon;
    constructor(
        private routerExtensions: RouterExtensions,
        private _modalService: ModalDialogService,
        private _vcRef: ViewContainerRef,
    ) {
        super();
    }

    onPullToRefreshInitiated(args: ListViewEventData) {
        setTimeout(() => {
            this.refreshData.emit()
            const listView = args.object;
            listView.notifyPullToRefreshFinished();
        }, 100);
    }

    onAddParticipant() {
        setTimeout(() => {
            this.routerExtensions.navigate(['event/addCampParticipant/', this.eventDetail.ID],
                { transition: transitionOptions });
        }, 10);
    }
    onAddMultiParticipant() {
        setTimeout(() => {
            this.routerExtensions.navigate(['event/campPersonMultiAdd/', this.eventDetail.ID],
                { transition: transitionOptions });
        }, 10);
    }

    get addIcon() { return addIcon }

    isPast() {
        return eventTimeState(this.eventDetail.StartDate, this.eventDetail.EndDate) === EventTimeState.PAST;
    }

    onRemoveParticipant(person: CampParticipant) {
        const options = {
            title: "Smazáni účastníka",
            message: `Opravdu chcete odstranit ${person.Name} z účastníků tábora?`,
            okButtonText: "Ano",
            cancelButtonText: "Ne"
        };
        dialogs.confirm(options).then((result: boolean) => {
            if (result) {
                this.removeParticipant.emit(person.ID);
            };
        });
    }
    onUpdateParticipant(person: CampParticipant) {
        const options: ModalDialogOptions = {
            viewContainerRef: this._vcRef,
            context: person,
            fullscreen: false,
        };
        this._modalService.showModal(CampEventParticipantUpdateModalComponent, options)
            .then((formResult: CampParticipant) => {
                if (formResult) {
                    this.updateParticipant.emit(formResult)
                }
            });
    }

    onPersonTap(personId: number) {
        setTimeout(() => {
            this.routerExtensions.navigate(['search/list', personId, false], { transition: transitionOptions });
        }, 10);
    }
}
