import { Component, EventEmitter, Output } from '@angular/core';
import * as utils from "@nativescript/core/utils/utils";
import { Input } from '@angular/core';
import { action } from '@nativescript/core/ui/dialogs';
import { ActionsExecuting } from '@ngxs-labs/actions-executing';
import { EduEventCourseOutput } from '~/pages/event/entities/edu-event-detail.types';
import { EduEventIllustrativePhotoOutput, EduEventOtherDetailOutput } from '~/pages/event/entities/edu-event-other-detail.types';
import { RouterExtensions } from '@nativescript/angular';
import { transitionOptions } from '~/constants/shared.constants';
import { downChevron } from '~/constants/icons';

const DEFAULT_COURSE_STATE = 'Výchozí';
@Component({
    selector: 'EduEventInfoDetail',
    moduleId: module.id,
    templateUrl: './edu-event-info-detail.component.html',
    styleUrls: ['./_edu-event-info-detail.component.scss']
})

export class EduEventInfoDetailComponent {
    @Input()
    isLoading: ActionsExecuting;
    @Input()
    eventId: number;

    defaultCourseState = DEFAULT_COURSE_STATE
    @Input()
    photos: EduEventIllustrativePhotoOutput[] = [];
    @Input()
    selectedCourse: EduEventCourseOutput;
    @Input()
    courses: EduEventCourseOutput[];
    @Input()
    eventOtherDetail: EduEventOtherDetailOutput;
    @Output()
    loadCourse = new EventEmitter();

    courseDialogOpen = false;
    downChevron = downChevron;

    constructor(private routerExtensions: RouterExtensions,
    ) {

    }
    onUrl(url: string) {
        utils.openUrl(url);
    }
    handleSelectCourse() {
        const coursesList = this.courses.map(obj => ({ key: obj.ID, label: obj.EventEducationType }));
        const options = {
            message: 'Vyberte kurz',
            cancelButtonText: 'Zrušit',
            actions: [DEFAULT_COURSE_STATE, ...coursesList.map(obj => obj.label)]
        };
        if (!this.courseDialogOpen) {
            this.courseDialogOpen = true;
            action(options).then(async (result) => {
                this.selectedCourse = this.courses.find(obj => obj.EventEducationType === result);
                if (this.selectedCourse || result === DEFAULT_COURSE_STATE) {
                    this.loadCourse.emit(this.selectedCourse && this.selectedCourse.ID)
                }
                this.courseDialogOpen = false;
            });
        }
    }

    openImage(photo: EduEventIllustrativePhotoOutput) {
        setTimeout(() => {
            this.routerExtensions.navigate(['event/image/', photo.ID_Document, photo.DisplayName],
                { transition: transitionOptions });
        }, 10);
    }

}
