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 { InfoLine } from '~/pages/event/types/common.types';
import { GenEventStatisticOutput } from '~/pages/event/entities/gen-event-detail.types';
import { GenParticipant } from '~/pages/event/types/genEvent';
import { GenEventDetailOutput } from './../../../entities/gen-event-detail.types';
import { addIcon, deleteIcon, editIcon, personDetailIcon, sortIcon } from '~/constants/icons';
import * as dialogs from "@nativescript/core/ui/dialogs";
import { ScrollTopBarListComponent } from '../../common/scroll-top-bar-list/scroll-top-bar-list.component';
import { CampEventParticipantUpdateModalComponent } from '../../camp/camp-participant-update-modal/camp-event-participant-update-modal.component';

interface ListType extends GenParticipant {
    extended: boolean;
}
@Component({
    selector: 'GenEventParticipantView',
    moduleId: module.id,
    templateUrl: './gen-event-participant-view.component.html',
    styleUrls: ['./_gen-event-participant-view.component.scss']
})
export class GenEventParticipantViewComponent extends ScrollTopBarListComponent<ListType>  {
    @Input()
    isLoading: boolean = true;
    @Input()
    eventId: number;
    @Input()
    participantStats: GenEventStatisticOutput[];
    @Input()
    set eventDetail(detail: GenEventDetailOutput) {
        this._eventDetail = detail;
        this.infoList = [
            { title: 'Celkový počet všech osob', value: detail.TotalParticipants },
            { title: 'Z toho zahraničních účastníků', value: detail.ForeignParticipants },
            { title: 'Z toho vedoucích', value: detail.LeaderParticipants },
            { title: 'Z toho rádců a pomáhajících roverů', value: detail.AssistantParticipants },
            {
                title: 'Automaticky spočítat deťodny a osobodny',
                value: detail.IsAutoComputedDays ? 'ano' : 'ne'
            },
            { title: 'Děťodny:', value: detail.ChildDays },
            { title: 'Osobodny:', value: detail.PersonDays },
        ]
    }

    @Output()
    refreshData = new EventEmitter();
    @Output()
    removeParticipant = new EventEmitter<number>();
    @Output()
    updateParticipant = new EventEmitter<GenParticipant>();
    @Output()
    onAutoStatUpdate = new EventEmitter<boolean>();
    @Output()
    openSortModal = new EventEmitter();

    selectedPersonId: number;
    infoList: InfoLine[];
    _eventDetail: GenEventDetailOutput;
    get eventDetail() {
        return this._eventDetail;
    }
    deleteIcon = deleteIcon;
    editIcon = editIcon;
    personDetailIcon = personDetailIcon;
    addIcon = addIcon;
    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/addGeneralParticipant/', this.eventId],
                { transition: transitionOptions });
        }, 10);
    }

    editAutoParticipantStat() {
        const options = {
            title: "Upravit automaticky počty",
            message: `Automaticky vyplnit tabulku počtů podle seznamu účastníků?`,
            okButtonText: "Ano",
            cancelButtonText: "Ne",
            neutralButtonText: "Storno",
        };
        dialogs.confirm(options).then((result) => {
            if (result !== undefined && result !== this._eventDetail.IsStatisticAutoComputed) {
                this.onAutoStatUpdate.emit(result)
            };
        });
    }

    onRemoveParticipant(person: GenParticipant) {
        const options = {
            title: "Smazáni účastníka",
            message: `Opravdu chcete odstranit ${person.Name} z účastníků akce?`,
            okButtonText: "Ano",
            cancelButtonText: "Ne"
        };
        dialogs.confirm(options).then((result: boolean) => {
            if (result) {
                this.removeParticipant.emit(person.ID);
            };
        });
    }

    onUpdateParticipant(person: GenParticipant) {
        const options: ModalDialogOptions = {
            viewContainerRef: this._vcRef,
            context: person,
            fullscreen: false,
        };
        this._modalService.showModal(CampEventParticipantUpdateModalComponent, options)
            .then((formResult: GenParticipant) => {
                if (formResult) {
                    this.updateParticipant.emit(formResult)
                }
            });
    }

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

}
