import { Component, ElementRef, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { CreateOrUpdateRoleInput, RoleEditDto, RoleServiceProxy, RoleMessageOutPut } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap';
import { PermissionTreeComponent } from '../shared/permission-tree.component';
import { finalize } from 'rxjs/operators';
import { TreeNode } from 'primeng/api';
import { ArrayToTreeConverterService } from '@shared/utils/array-to-tree-converter.service';
import { TreeDataHelperService } from '@shared/utils/tree-data-helper.service';
import * as _ from 'lodash';

@Component({
    selector: 'createOrEditRoleModal',
    templateUrl: './create-or-edit-role-modal.component.html'
})
export class CreateOrEditRoleModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal') modal: ModalDirective;
    @ViewChild('permissionTree') permissionTree: PermissionTreeComponent;

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    active = false;
    saving = false;
    treeData: any;
    selectedMessages: TreeNode[] = [];
    grantedMsgTypeName = [];

    role: RoleEditDto = new RoleEditDto();
    constructor(
        injector: Injector,
        private _roleService: RoleServiceProxy,
        private _arrayToTreeConverterService: ArrayToTreeConverterService,
        private _treeDataHelperService: TreeDataHelperService,
    ) {
        super(injector);
    }

    show(roleId?: number): void {
        const self = this;
        self.active = true;
        this.grantedMsgTypeName = [];
        self._roleService.getRoleForEdit(roleId).subscribe(result => {
            self.role = result.role;
            this.permissionTree.editData = result;
            for (let item of result.grantedRoleMsgType) {
                this.grantedMsgTypeName.push(item.toLowerCase());
            }
            this.setTreeData(result.roleMsgType, this.grantedMsgTypeName);
            self.modal.show();
        });
    }

    setTreeData(MsgType: RoleMessageOutPut[], grantedMsg: string[]) {
        this.treeData = this._arrayToTreeConverterService.createTree(MsgType, 'parentMsgTypeId', 'messageTypeId', null, 'children',
            [{
                target: 'label',
                source: 'messageTypeName'
            }, {
                target: 'expandedIcon',
                value: 'fa fa-folder-open m--font-warning'
            },
            {
                target: 'collapsedIcon',
                value: 'fa fa-folder m--font-warning'
            },
            {
                target: 'expanded',
                value: true
            }]);
            this.setSelectedNodes(grantedMsg);
    }

    setSelectedNodes(grantedPermissionNames: string[]) {
        _.forEach(grantedPermissionNames, permission => {
            let item = this._treeDataHelperService.findNode(this.treeData, { data: { messageTypeId: permission } });
            if (item) {
                this.selectedMessages.push(item);
            }
        });
    }

    nodeSelect(event) {
        let parentNode = this._treeDataHelperService.findParent(this.treeData, { data: { name: event.node.data.messageTypeId } });

        while (parentNode != null) {
            this.selectedMessages.push(parentNode);
            parentNode = this._treeDataHelperService.findParent(this.treeData, { data: { name: parentNode.data.messageTypeId } });
        }
    }

    onShown(): void {
        document.getElementById('RoleDisplayName').focus();
    }

    save(): void {
        const self = this;
        let msgTypeId = [];
        for (let i = 0; i < this.selectedMessages.length; i++) {
            msgTypeId.push(this.selectedMessages[i].data.messageTypeId);
        }
        const input = new CreateOrUpdateRoleInput();
        input.role = self.role;
        input.messageTypeId = msgTypeId;
        input.grantedPermissionNames = self.permissionTree.getGrantedPermissionNames();

        this.saving = true;
        this._roleService.createOrUpdateRole(input)
            .pipe(finalize(() => this.saving = false))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.selectedMessages = [];
                this.close();
                this.modalSave.emit(null);
            });
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }
}