import { Component, ViewChild, OnInit } from '@angular/core';
import { ModalDialogParams } from '@nativescript/angular';
import { Select, Store } from '@ngxs/store';
import { LoadGenEventNewParticipationFunctionTypes, LoadGenEventNewParticipationQualificationTypes } from '~/pages/event/state-mgmt/gen/gen-event-participant.actions';
import { GenEventParticipantState } from '~/pages/event/state-mgmt/gen/gen-event-participant.state';
import * as dialogs from "@nativescript/core/ui/dialogs";
import { PersonSearchContainerComponent } from '../../common/person-search-container/person-search-container.component';
import { actionsExecuting, ActionsExecuting } from '@ngxs-labs/actions-executing';
import { Observable } from 'rxjs';

export interface TeamMember {
    roleId: number;
    memberId: number | null;
    memberName: string | null;
    roleName: string;
    note: string | null;
}
export interface EventLeaderUpdateModalInput {
    members: TeamMember[],
    eventId: number
}

@Component({
    selector: 'GenEventUpdateLeadderModal',
    moduleId: module.id,
    templateUrl: './gen-event-update-leader-modal.component.html',
    styleUrls: ['../../../event.scss']
})
export class GenEventUpdateLeaderModal implements OnInit {

    @Select(actionsExecuting([
        LoadGenEventNewParticipationQualificationTypes,
        LoadGenEventNewParticipationFunctionTypes,
    ]))
    isLoading$: Observable<ActionsExecuting>;

    @ViewChild('personSearch', { static: true })
    personSearch: PersonSearchContainerComponent

    members: TeamMember[];
    eventId: number;
    canSelectFunction: boolean;
    noteForm = { note: '' }

    constructor(
        private params: ModalDialogParams,
        private store: Store,
    ) {
    }

    ngOnInit(): void {
        const { members, eventId } = this.params.context as EventLeaderUpdateModalInput;
        this.members = members;
        this.eventId = eventId;
        this.canSelectFunction = false
    }
    close() {
        this.params.closeCallback();
    }

    deleteLeader(member: TeamMember) {
        member.memberId = null;
        member.memberName = null;
        member.note = null;
        this.canSelectFunction = !!this.personSearch.selectedPersonId
    }
    updateNote(member: TeamMember) {
        const opts = {
            title: "Upravit poznámku",
            message: "Poznámka pro " + member.memberName,
            okButtonText: "Upravit",
            cancelButtonText: "Zrušit",
            defaultText: member.note,
        };
        dialogs.prompt(opts).then((r) => {
            member.note = r.text;
        });
    }
    handleSelectedPerson(id: number) {
        this.canSelectFunction = !!id;
    }

    assignFunction() {
        const userId = this.personSearch.selectedPersonId;
        const personList = this.store.selectSnapshot(GenEventParticipantState.getPersonList)
        const person = personList.find(p => p.ID === userId)
        dialogs.action({
            title: 'Vyberte funkci',
            message: "Vyberte funkci pro " + person.DisplayName,
            cancelButtonText: "Zrušit",
            actions: this.members.map(p => p.roleName)
        }).then((result) => {
            const selectedMember = this.members.find(m => m.roleName === result);
            selectedMember.memberId = userId;
            selectedMember.note = this.noteForm.note;
            this.personSearch.clear()
            this.noteForm = { note: '' };
            selectedMember.memberName = person.DisplayName
            this.canSelectFunction = false
        });
    }

    submit() {
        this.params.closeCallback(this.members);
    }

}
