import { Component, OnInit } from '@angular/core';
import { RouterExtensions } from '@nativescript/angular';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import * as dialogs from "@nativescript/core/ui/dialogs";
import { transitionOptions } from '~/constants/shared.constants';
import { ActivatedRoute } from '@angular/router';
import { actionsExecuting, ActionsExecuting } from '@ngxs-labs/actions-executing';
import { TeamMember } from '../../gen/gen-event-update-leader-modal/gen-event-update-leader-modal.component';
import { EduEventDeleteInstructor, LoadEduEventDetail } from '~/pages/event/state-mgmt/edu/edu-event-detail.action';
import { LoadEventInstructors } from '~/pages/event/state-mgmt/edu/edu-event-people.actions';
import { EduEventInstructorsOutput } from '~/pages/event/entities/edu-event-people.types';
import { EduEventPeopleDetailState } from '~/pages/event/state-mgmt/edu/edu-event-people.state';
import { EduEventDetailOutput } from '~/pages/event/entities/edu-event-detail.types';
import { EduEventDetailState } from '~/pages/event/state-mgmt/edu/edu-event-detail.state';
import { deleteIcon, editIcon, addIcon } from '~/constants/icons';

@Component({
    selector: 'EduEventInstructorListPage',
    moduleId: module.id,
    templateUrl: './edu-event-instructor-list-page.component.html',

})
export class EduEventInstructorListPageComponent implements OnInit {
    @Select(actionsExecuting([
        LoadEventInstructors, LoadEduEventDetail, EduEventDeleteInstructor
    ]))
    isLoading$: Observable<ActionsExecuting>;

    @Select(EduEventPeopleDetailState.getEventInstructors)
    instructors$: Observable<EduEventInstructorsOutput[]>;
    @Select(EduEventDetailState.getEventDetail)
    eventDetail$: Observable<EduEventDetailOutput>;

    members: TeamMember[] = [];
    eventId: number;
    canSelectFunction: boolean;
    noteForm = { note: '' }
    instructors: EduEventInstructorsOutput[];
    deleteIcon = deleteIcon;
    editIcon = editIcon;
    addIcon = addIcon;

    constructor(
        private route: ActivatedRoute,
        private store: Store,
        private routerExtensions: RouterExtensions,) {
    }

    ngOnInit(): void {
        this.route.params.subscribe(params => {
            this.eventId = parseInt(params['id'], 10);
            this.store.dispatch([
                new LoadEventInstructors(this.eventId),
                new LoadEduEventDetail(this.eventId),
            ])
            this.canSelectFunction = false
        })

    }
    close() {
        this.routerExtensions.back()
    }


    deleteInstructor(instructor: EduEventInstructorsOutput) {
        const opts = {
            title: "Smazáni instruktora",
            message: `Opravdu chcete odebrat ${instructor.Person} z instruktorů akce?`,
            okButtonText: "Ano",
            cancelButtonText: "Ne",
        };
        dialogs.confirm(opts).then(res => {
            if (res) {
                this.store.dispatch(new EduEventDeleteInstructor(instructor.ID))
                    .subscribe(() => {
                        this.store.dispatch(new LoadEventInstructors(this.eventId))
                    })
            }
        })
    }
    updateInstructor(inst: EduEventInstructorsOutput) {
        setTimeout(() => {
            this.routerExtensions.navigate(['event/educationUpdateInstructor/',
                this.eventId, inst && inst.ID].filter(v => v), { transition: transitionOptions });
        }, 10);
    }
}
