import { Component, EventEmitter, Output, Input, ViewContainerRef } from '@angular/core';
import { ModalDialogService, ModalDialogOptions } from '@nativescript/angular';
import { GenEventDetailOutput } from '~/pages/event/entities/gen-event-detail.types';
import { GenEventUpdateReportModalComponent } from './../gen-event-update-report-modal/gen-event-update-report-modal.component';

@Component({
    selector: 'GenEventReportDetail',
    moduleId: module.id,
    templateUrl: './gen-event-report-detail.component.html',
})

export class GenEventReportDetailComponent {

    @Input()
    eventDetail: GenEventDetailOutput;
    @Input()
    isLoading: boolean = true;
    @Output()
    onUpdateEventReport = new EventEmitter<{ target: string, program: string, eventId: number }>();

    constructor(
        private _modalService: ModalDialogService,
        private _vcRef: ViewContainerRef,
    ) {

    }

    updateReport() {
        const options: ModalDialogOptions = {
            viewContainerRef: this._vcRef,
            context: { target: this.eventDetail.Target, program: this.eventDetail.Program },
            fullscreen: false,
        };
        this._modalService.showModal(GenEventUpdateReportModalComponent, options)
            .then((formResult: { target: string, program: string }) => {
                if (formResult) {
                    this.onUpdateEventReport.emit({ eventId: this.eventDetail.ID, ...formResult })
                }
            });
    }
}